css3动画animation

时间：2017-03-09 12:55:38 阅读：210 评论：0 收藏：0 [点我收藏+]

@keyframes film_out{

from{

transform: scale3d(1,1,1) rotate(0);

opacity: 1;

}

to{

transform: scale3d(0.7,0.7,0.7) rotate(90deg);

opacity: 0;

}

div { animation: film_out 5s linear 2s infinite alternate forwards; -webkit-animation: film_out 5s linear 2s infinite alternate forwards;

按上面集合配置的顺序：

“film_out”: 通过@keyframes定义的动画名；（animation-name）

“5s”: 动画维持时间；（animation-duration）

“linear”: 规定动画的速度曲线。默认是 "ease"；（animation-timing-function）

“2s”: 延迟动画开始的时间；（animation-delay）

“infinite”: 播放的次数，infinite表示无限循环；（animation-direction）

“alternate”: 是否应该轮流反向播放动画，alternate表示应该反向播放（animation-direction）

“forwards”: 动画播放停止后停在最后一帧；（animation-fill-mode）

原文地址：http://www.cnblogs.com/Marys/p/6524985.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行