欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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;}
}