animation

最新推荐文章于 2020-02-01 22:01:46 发布

weixin_30621711

最新推荐文章于 2020-02-01 22:01:46 发布

阅读量76

点赞数

原文链接：http://www.cnblogs.com/justSmile2/p/9544203.html

版权

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