Css_动画处理

2、animation

animation: keyfName 5s infinite;
animation: keyfName 5s linear 2s infinite alternate;

1. animation-name :绑定@keyframes的名称;
2. animation-duration : 持续时长，默认0（动画不播放）；
3. animation-timing-function : 速度曲线，默认 ease；
   • linear：匀速；
   • ease：默认，低速开始-加快快-然后低速结束；（ease表示相对比较慢的）
   • ease-in：以低速开始；
   • ease-out：以低速结束；
   • ease-in-out：以低俗开始和结束；
   • cubic-bezier(n,n,n,n)：三次贝塞尔自定义值，n为 0 ~ 1；
4. animation-delay ：动画延迟时间（默认0s，支持正负值）；
5. animation-iteration-count ：循环次数，默认1
   • n，设置播放次数；
   • infinite：无线循环；
6. animation-direction ：下一次周期是否逆向播放，默认normal，
   • normal：正常播放；
   • alternate：轮流反向播放，奇数（1，3，5…）正常播放，偶数（2，4，6…）逆向播放;
7. animation-play-state ：运行或暂停，默认 running；
   • paused：暂停；
   • running：
8. animation-fill-mode ：规定动画在播放之前或之后，其动画效果是否可见；
   • none
   • forwards
   • backwards
   • both