animation

1.写法 - 默认值 - 单独写法 - 意义
animation: name duration timing-function delay iteration-count direction;
animation: none            0                   ease                       0                  1                         normal;
animation: animation-name  animation-duration  animation-timing-function  animation-delay   animation-iteration-count  animation-direction;
animation: keyframe 名称   动画所花费的时间 s/ms  动画的速度曲线               动画开始之前的延迟   动画应该播放的次数           是否应该轮流反向播放动画 ;
2.细节写法(ie9+及其它浏览器兼容写法)
兼容写法:标准 - Firefox - Safari 和 Chrome  - Opera
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes mymove    /    @-webkit-keyframes mymove    /    @-o-keyframes mymove
3.animation-play-state: paused|running; 规定动画正在运行还是暂停。(默认值为running)
4.animation-fill-mode : none | forwards | backwards | both;规定动画在播放之前或之后,其动画效果是否可见。默认值none(即不保持最后状态)
forwards当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
5.animation-timing-function:cubic-bezier(n,n,n,n);在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。扩展更丰富的动画
原文地址:https://www.cnblogs.com/justSmile2/p/9544203.html