Kidney自得其乐版CSS教程 Chapter7 Transition&Animation

Posted 2020-07-24

Chapter 7 Transition&Animation

Version	Update	Note
1.0	2016-6-11	首次添加。欢迎在评论中指出错误，一经核实，立即修订，且注明贡献者。

 

 

 

 

1、transition

　　transition的作用是在状态变化之间增加时间轴属性，使其呈现平滑过渡的动态效果。

　　它是以下四个属性的简写：

1.1 transition-property

       设置参与过渡的属性。具备动画性的属性才会有过渡效果。

       值：属性名（多个属性名用逗号隔开），all

1.2 transition-duration

       设置过渡的持续时间。

1.3 transition-timing-function

       设置时间曲线类型。

       接受的值：linear  ease  ease-in  ease-out  ease-in-out

    cubic-bezier(n, n, n, n)（贝塞尔曲线）

1.4 transition-delay

       设置延迟时间。

2、Animation

       设置动画需先用@keyframes定义动画。其工作原理就是设置每一帧的样式，和flash动画、视频制作的原理是一样的。每一帧的时刻用百分比设置。相邻两帧采用过渡变化。

       @keyframes name{

              0%{ }

              20%{ }

              100%{ }

       }

       首尾还可以用关键字from和to代替，并且不是必须的。因为默认第一帧和最后一帧的状态都是原始样式。

       animation是以下八个属性的简写：

2.1 animation-name

       指定动画名称。

2.2 animation-duration

       指定动画持续时间。

2.3 animation-timing-function

       类似于transition-timing-function

       jQuery.easing.js提供了更多预设的时间曲线，它们其实全都是基于贝塞尔曲线设置的。

2.4 animation-delay

       设置延迟。

3、动画控制

3.1 animation-iteration-count

       iteration表示循环。该属性用于指定循环次数。

       值：数字、infinite（无限循环）

3.2 animation-direction

       设置动画播放的方向。

       值：normal（默认正向），reverse（反向），alternate（正反交替），alternate-reverse（“反正”交替）

       设置交替播放，需要保证循环次数大于1。

3.3 animation-play-state

       值：running，pause用于设置暂停和播放。

3.4 animation-fill-mode

       用于设置动画开始前和结束后的状态样式。

       none（默认值）开始前和结束后都保持原状。

       forwards，动画结束后保持最后一帧的状态。如果没有设置最后一帧，则最后一帧默认为原始状态。

       backwards，动画开始前保持第一帧的样式，只在animation-delay期间有效果。

       这个“第一帧”视动画方向而定，如果是正向，则“第一帧”为0%帧，如果是反向，则“第一帧”为100%帧。

       both，同时应用forwards和backwards规则。

       更多细节可参见：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode