animation-name: xxx 为keyframes动画规定一个名字
animation-duration: 4s 动画过渡的时间
animation-delay:2s; 动画开始前的延迟使时间(可以是负数,表示动画从开始了多少秒开始的)
animation-iteration-count:3
animation:example 4s infinite 名字 延迟时间 重复次数(infinite表示无穷)
animation-direction:normal reverse alternate alternate-reverse 正常播放 向后 向前向后 向后向前
如果是alternate 如果设置的播放次数是一次的话,只会执行向前一个动作,向后要第二次才会执行 . 无穷的话就是一直重复
animation-timing-function:
-ease 从慢开始,然后加快,然后缓慢结束的动画(默认)
-linear 速度保持相同
-ease-in 慢速开始的动画
-ease-out 慢速结束的动画
-ease-in-out 开始和结束较慢的动画
animation-fill-mode:
-none;
-forwards; 保留最后一个关键帧的样式
-backwards; 获取第一个关键帧的样式
-both; 两个都要
animation: name duration ....;
@keyframes xxx{
from{backgound:red;}
to{background:yellow;}
0%{background:red;}
25%{backgraound:yellow;}
...
}
-webkit- /* Safari 和 Chrome */
}