css3动画animation属性大全

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/caiyongshengCSDN/article/details/79398573

animation属性

语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

例：animation: myanimation 2s linear 1s infinite forwards;

animation 属性是一个简写属性，用于设置动画属性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

• animation-name    动画名称

• animation-duration   动画指定需要多少秒或毫秒完成
  值：time      默认值为 0，意味着没有动画效果

• animation-timing-function   设置动画如何完成一个周期
  值：linear  匀速
         ease   先慢后快，结束前变慢     默认
         ease-in    低速开始
         ease-out  低速结束
         ease-in-out   低速开始和结束
         cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

• animation-delay   动画在启动前的延迟间隔
  值：time   默认值为 0

• animation-iteration-count    动画的播放次数
  值：n   一个数字，定义播放多少次动画     默认值1
         infinite    动画无限次播放

• animation-direction    是否轮流反向播放动画
  值：normal         正常
         reverse        反向播放
         alternate      在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
         alternate-reverse   在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放
  

• animation-fill-mode    当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要处于什么状态
  值：none   默认，播放完动画后，画面停在起始位置
        forwards     播放完动画，停在animation定义的最后一帧(保持最后一个属性值)
         backwards   如果设置了animation-delay，在开始到delay这段时间，画面停在第一帧。如果没有设置delay，画面是元素设置的初始值
         both   设置动画状态为动画结束或开始的状态（例如设置奇数播放为forwards状态，偶数播放为backwards状态）

• animation-play-state    动画是否正在运行或已暂停
  值：paused   指定暂停动画
         running   指定正在运行的动画，默认

• initial    设置属性为其默认值

• inherit   从父元素继承属性