css transition & animation

transition

支持：IE10+

img{
    transition: 1s 1s height ease;
}

transition-property: 属性
transition-duration: 持续时间
transition-delay: 延迟
transition-timing-function: 变化函数

　　　　　　　　　　- linear cubic-bezier(0,0,1,1)
　　　　　　　　　　- ease cubic-bezier(0.25,0.1,0.25,1)
　　　　　　　　　　- ease-in cubic-bezier(0.42,0,1,1)
　　　　　　　　　　- ease-out cubic-bezier(0,0,0.58,1)
　　　　　　　　　　- ease-in-out cubic-bezier(0.42,0,0.58,1)
　　　　　　　　　　- cubic-bezier(n,n,n,n) 自定义贝塞尔函数

无效的属性：display，background: url(foo.jpg)

不能重复执行，除非重复触发事件

animation

支持：IE10+

div:hover {
  animation: 1s 1s rainbow linear 3 forwards normal;
}
@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

animation-name: 对应keyframes的名称
animation-duration：持续时间
animation-timing-function：变化函数

　　　　　　　　　　- linear cubic-bezier(0,0,1,1)
　　　　　　　　　　- ease cubic-bezier(0.25,0.1,0.25,1)
　　　　　　　　　　- ease-in cubic-bezier(0.42,0,1,1)
　　　　　　　　　　- ease-out cubic-bezier(0,0,0.58,1)
　　　　　　　　　　- ease-in-out cubic-bezier(0.42,0,0.58,1)
　　　　　　　　　　- cubic-bezier(n,n,n,n) 自定义贝塞尔函数

　　　　　　　　　　- step函数

　　　　　　　　　　　　　　- 步幅：大于零的整数

　　　　　　　　　　　　　　- 对齐：指定step函数是左对齐连续函数，还是右对齐连续函数。

　　　　　　　　　　　　　　　　　　start：对齐开始，第一帧发生在动画开始时，end：对齐结束，最后一帧发生在动画结束时。可选项。

　　　　　　　　　　　　　　　　　　一个step函数的例子： http://dabblet.com/gist/1745856

div:hover {
  animation: 1s rainbow infinite steps(10);
}

animation-delay：延迟
animation-iteration-count：执行次数
animation-fill-mode：填充模式。决定一次动画播放完成之后是回到起始状态还是停留在结束状态

　　　　　　　　　　- none 回到最初的状态
　　　　　　　　　　- forwards 表示动画结束后，元素就是当前动画结束时候的状态。对应keyframe中的"to"或"100%"帧。
　　　　　　　　　　- backwards 表示动画开始之前，元素处于keyframe是"from"或"0%"关键帧的状态。
　　　　　　　　　　- both

animation-direction：执行方向

　　　　　　　　　　- normal  0->1, 0->1, 0->1  正常播放
　　　　　　　　　　- alternate  0->1, 1->0, 0->1  正常播放，倒带播放
　　　　　　　　　　- reverse  1->0, 1->0, 1->0  倒带播放
　　　　　　　　　　- alternate-reverse  1->0, 0->1, 1->0  倒带播放，正常播放

animation-play-state：播放状态，可以用js控制

　　　　　　　　　　- paused 动画暂停
　　　　　　　　　　- running 动画播放中

 

keyframes中，from=0%，to=100%