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%

css transition & animation,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。