CSS3的动画属性

transition、animation和transform是CSS3中三个制作动画的重要属性，本篇文章主要对其进行学习了解。

一、transition

transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

transition ：transition-property || transition-duration || transition-timing-function || transition-delay;

transition主要包含四个属性值：执行变换的属性：transition-property，变换延续的时间：transition-duration，在延续时间段，变换的速率变化：transition-timing-function，变换延迟时间：transition-delay。

1. transition-property

transition-property: none || all || property;

transition-property是用来指定当元素其中一个属性改变时执行transition效果。

none: 没有属性会获得过渡效果；

all: 所有属性都将获得过渡效果,也是其默认值；

property: 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

2. transition-duration

transition-duration: time;

transition-duration是用来指定元素 转换过程的持续时间，取值time为数值，单位为s（秒）或者ms(毫秒)，其默认值是0，也就是变换时是即时的。

3. transition-timing-function

transition-timing-function: linear || ease || ease-in || ease-out || ease-in-out || cubic-
bezier(n,n,n,n);

以上具体取值含义如下：

值	描述
linear	规定以相同速度开始至结束的过渡效果。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in	规定以慢速开始的过渡效果。
ease-out	规定以慢速结束的过渡效果。
ease-in-out	规定以慢速开始和结束的过渡效果。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

4. transition-delay

transition-delay: time;

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值time为数值，单位为s（秒）或者ms(毫秒)， 默认大小是”0”，也就是变换立即执行，没有延迟。

5. 示例

html代码

<div class="one"></div>

css代码