css学习笔记：动画效果

• animation
  动画效果，在设置动画时需要先创建关键帧。

  /*		@keyframes 动画名	 */
  @keyframes test{
      /*			开始位置值		*/
      form{
          background-position: 0 0;
      }
  	 /*			结束位置值		*/
      to{
          background-position: 600px 0;
      }
  }
  

参数：

• animation-duration
  动画持续时间
• animation-name
  动画的关键帧名称
• animation-timing-function
  动画的速度曲线。默认是 “ease”。
• animation-delay
  动画延迟时间，默认为0
• animation-iteration-count
  动画执行的次数，默认为1次。infinite为重复执行
• animation-direction
  动画运行的方向
  可选值：
  • normal
    默认，从to到from
  • reverse
    反向执行,从from到to
  • alternate
    开始方向为to-from。
    当执行多次时，运行方向为 to-from from-to to-from 循环运行
  • alternate-reverse
    开始方向为from-to。
    当执行多次时，运行方向为from-to to-from from-to 循环运行
• animation-play-state
  动画运行的状态，设置后控制动画的运行
  有些时候我们不希望动画一开始就运行，而是当我们需要时进行运行
  可选值：
  - running 运行(默认)
  - paused 暂停
• animation-fill-mode
• 动画在播放之前或之后，其动画效果是否可见
  可选值：
  • none
    动画结束后，回到to开始位置
  • forwards
    动画结束后，留在from最后一个位置
  • backwards
    当延迟开启时，在延迟期间，动画处于开始位置
    不设置backwards时，延迟之后动画才处于开始位置
  • both
    forwards 与 backwards 同时使用效果
  • 简写

    animation: name duration timing-function delay iteration-count direction fill-mode;
    animation: test 2s steps(2) 2s infinite normal none;