@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）