CSS3之动画
程序员文章站
2024-03-25 14:31:04
...
在需要移动变化的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;}
}
上一篇: 快速排序QSort详细解析
下一篇: Tomcat 开启APR运行模式