CSS3之动画

在需要移动变化的div上设置以下属性
animation-name: ;指定keyfranes动画名称

animation-duration:2s; 指定动画执行时间

animation-timing-function:ease; 指定动画的速度曲线,默认“ease”缓动,linear平缓…

animation-delay:-1s;指定动画的延迟时间,默认的话“0”无延迟,设置为负数可以解决停顿问题

animation-direction:normal;规定动画是否在下一周期逆向地播放。默认是 “normal”。alternate(方向是正反正反。。。)

animation-iteration-count:2;设置循环次数,infinite为无限

简写的动画 animation 属性: animation:动画名字 持续时间;

此外还需要定义关键帧
方式一:

@keyframes mymove/*mymove是需要自己定义的动画名字*/
{
from {background:red;}
to {background:yellow;}
}

方式二:

@keyframes mymove/*mymove是需要自己定义的动画名字*/
{
0%   {background: red;}  /*左右边距,字体大小等都可以设置*/
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

你可能感兴趣的:(CSS)