js动画animation的属性及效果

彻底弄懂animation属性效果

一般来说给一个元素加上animation,加在他的css上就好，
常用的动画属性有：

• animation-name:test
  动画名称，唯一标识，与@keyframes相对接，必选属性；

• animation-duration:5s
  动画的单次生效时间,不包含animation-delay在内，必选
  示例：
  animation-interation-count:2, animation-delay:5s, animation-duration:10s

• animation-timing-function: linear;
  动画的速率曲线，非必选,默认值为ease:低速开始，然后变快，在结束前减速

• animation-delay: 2s;
  动画延迟时间，非必选，默认0延迟

• animation-iteration-count: infinite;
  规定动画被播放的次数，非必选，默认一次

• animation-direction: alternate;
  规定动画在下一周是否逆向地播放,非必选，默认值normal,但设置的条件必须是animation-iteration-count在两次以上,否则不生效；

• animation-play-state: running;
  规定动画是否正在运行或暂停(非必选)

至少设置完动画的name和duration后，便可以使用@keyframes 连接动画名来分阶段的设置动画效果了。有什么讲的不对的地方，还请各位指出，本人一定虚心学习。再会！