本文共 1463 字，大约阅读时间需要 4 分钟。

CSS3

5.4 CSS3 过渡与动画（transition属性 @keyframs规则 animation属性）

过渡效果 ：transition属性主要完成的效果是让当前的元素从一种状态过渡到另一种状态，发生两个状态之间的一个变化。

动画效果：让一个元素通过animation属性来完成若干个状态之间的一个转换，利用@keyframes规则和animation属性。

过渡 transition属性

transition属性主要完成的效果是让当前的元素从一种状态过渡到另一种状态，发生两个状态之间的一个变化。

transition 将元素的某个属性或者某几个属性或者所有属性从“一个值”在指定的时间内过渡到“另一个值”。 transition属性的几个子属性（也可以把这几个子属性都写在transition属性里面） （1）transition-property 作用于哪一个或者哪几个属性。可以带有属性的名字，如果作用于一个属性，就写这个属性的名字；作用于多个属性的话，就用逗号隔开；如果是所有属性，就用关键字all就可以了。 （2）transition-duration 变化的过程持续的时间。用秒或毫秒为单位表示 （3）transition-timing-function 过渡时使用的方法（函数）。有下面几个取值： 例子：

	
   			
   
    易烊千玺
   

效果

初始状态 终止状态（鼠标悬停到div上）

动画效果 @keyframs规则 和 animation属性

动画效果 上面的transition属性只能从一个状态到另一个状态，通过animation属性可以让一个元素完成若干个状态之间的一个转换，这就是动画，采用animation属性完成。涉及到@keyframs规则。动画效果分两步：

（1）定义动画：采用@keyframes规则，keyframes翻译出来即关键帧，动画效果就是通过很多幅图片，连续播放的时候利用人眼的视觉延迟，自动地将他们连接在一起就形成了一个动态的动画效果，每幅静态图片都称为是一个keyframes，所以这个规则定义出来的就是所有关键帧。 @keyframes 动画名{ 定义动画的关键帧，每个关键帧在定义的时候都要有一个名字，这个名字通常用百分比来表示，0%是最开始的时候，100%是最后播放完的状态，中间的状态用具体的百分比来表示；关键帧的名字后面，用花括号{}括起来，就是当前帧的状态下某一个属性的取值。} （2）调用规则：animation属性。 animation：动画名 播放时间 变化方式 animation属性的几个子属性（也可以把几个子属性都写在animation属性里面） （1）animation-name：引用@keyframes动画的名称，利用@keyframes规则定义出来的动画名。 （2）animation-duration：动画完成时间 （3）transition-timing-function ：规定动画的速度曲线，默认是“ease”，和transition的取值是完全一样的 （4）transition-paly-state：running|paused；表示动画当前播放的状态，running表示当前动画正在播放，paused表示动画播放完成，比如我们可以设置鼠标悬停的时候播放动画，鼠标移出的时候停止播放。 例子

	
   			
   
    易烊千玺
   

效果

开始 中间 播放结束

转载地址：http://opqzi.baihongyu.com/