css3动画

transform，transition，animation

css3动画

• 2d变化（transform）
  • transform
    • 平移（translate）
      • translate(<length>[, <length>])
      • translateX(<length>)
      • translateY(<length>)
    • 旋转（rotate）
      • rotate(<angle>)
    • 放缩（scale）
      • scale(<number>[, <number>])
      • scaleX(<number>)
      • scaleY(<number>)
    • 扭曲（skew）
      • skew(<angle> [, <angle>])
      • skewX(<angle>)
      • skewY(<angle>)
  • transform-origin
• 过渡（transition）
  • 属性（transition-property）
    • all：所有可以进行过渡的css属性none：不指定过渡的css属性<property>：指定要进行过渡的css属性
  • 持续时间（transition-duration）
  • 过渡效果（transition-timing-function）
    • linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
  • 延迟时间（transition-delay）
• 动画（animation）
  • 动画名称（animation-name）
    • 定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：@keyframes testanimations{ from{opacity:1;} to{opacity:0;} }如果复杂的动画，可以混合<percentage>去设置某个时间段内的任意时间点的样式：@keyframes testanimations{ from{transform:translate(0,0);} 20%{transform:translate(20,20);} 40%{transform:translate(40,0);} 60%{transform:translate(60,20);} 80%{transform:translate(80,0);} to{transform:translate(100,20);} }当然，也可以不适用关键字from和to，而都使用<percentage>：@keyframes testanimations{ 0%{transform:translate(0,0);} 20%{transform:translate(20,20);} 40%{transform:translate(40,0);} 60%{transform:translate(60,20);} 80%{transform:translate(80,0);} 100%{transform:translate(100,20);} }
  • 持续时间（animation-duration）
  • 过渡效果（animation-timing-function）
  • 延迟时间（animation-delay）
  • 循环（animation-iteration-count）
    • infinite：无限循环<number>：指定对象动画的具体循环次数
  • 循环类型（animation-direction）
    • normal：正常方向alternate：正常与反向交替
  • 状态（animation-play-state）
    • running：运动paused：暂停
  • 动画时间之外的状态（animation-fill-mode）
    • none：默认值。不设置对象动画之外的状态forwards：设置对象状态为动画结束时的状态backwards：设置对象状态为动画开始时的状态both：设置对象状态为动画结束或开始的状态