css动画

• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

• 实例

  /* 动画代码 */
  @keyframes name {
    from {background-color: red;}
    to {background-color: yellow;}
  }

• @keyframes name{
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
  }

  • @keyframes	规定动画模式。
    animation	设置所有动画属性的简写属性。
    animation-delay	规定动画开始的延迟。
    animation-direction	定动画是向前播放、向后播放还是交替播放。
    animation-duration	规定动画完成一个周期应花费的时间。
    animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
    animation-iteration-count	规定动画应播放的次数。
    animation-name	规定 @keyframes 动画的名称。
    animation-play-state	规定动画是运行还是暂停。
    animation-timing-function	规定动画的速度曲线。

    div {
      animation-name: name;//动画名称
      animation-duration: 5s;//一次动画需要多久
      animation-timing-function: linear;//速度曲线

  • linear	动画从头到尾的速度是相同的。
    ease	默认。动画以低速开始，然后加快，在结束前变慢。
    ease-in	动画以低速开始。
    ease-out	动画以低速结束。
    ease-in-out	动画以低速开始和结束。
    cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

      animation-delay: 2s;//几秒后开始动画
      animation-iteration-count: infinite;//执行次数

  • animation-iteration-count: n|infinite;

  • animation-direction: alternate;是否应该轮流反向播放动画。
    　

    animation-direction: normal|alternate;

    
    
    }

简写

animation: name 5s linear 2s infinite alternate;