序言：在CSS3中，动画电影效用有俩种形式：

第二种：transition 特性根本无法透过选定特性的已经开始值与完结值，接着在这三个特性值间展开光滑过渡阶段来同时实现动画电影效用，因而根本无法同时实现单纯的动画电影效用。transition特性机能是完全相同的，都是透过发生改变原素的“特性值”来同时实现动画电影效用。

第三种：animation 特性透过表述数个sizes和表述每一sizes（@keyframes）中原素的特性值来同时实现繁杂的动画电影效用。

过渡阶段

transition

增设原素当过渡阶段效用，能同时实现原素相同状况间的光滑过渡阶段，时常用以制做动画电影效用。

句法：transition: < property > < duration > < timing-function > < delay > ;

模块：

transition-property 句法

transition-duration 句法

transition-duration: time;

transition-timing-function 句法

理解steps steps 函数选定了一个阶跃函数 第一个模块选定了时间函数中的间隔数量（必须是正整数） 第二个模块可选，接受 start 和 end 三个值，选定在每一间隔的起点或是终点发生阶跃变化，默认为 end。 step-start等同于steps(1,start)，动画电影分成1步，动画执行时为已经开始左侧端点的部分为已经开始； step-end等同于steps(1,end)：动画电影分成一步，动画电影执行时以结尾端点为已经开始，默认值为end。

transition-delay 句法

.box { /* 分别增设数个特性 */ transition: height 1s ease, width 2s linear; }

1.1 过渡阶段的缺点

transition的优点在于单纯易用，但是它有几个很大的局限。

transition需要事件触发，所以没法在网页加载时自动发生。

transition是一次性的，不能重复发生，除非一再触发。

transition根本无法表述已经开始状况和完结状况，不能表述中间状况，也就是说只有一个已经开始状况和完结状况。

一条transition规则，根本无法表述一个特性的变化，不能控制数个特性。

Animation就是为了解决这些问题而提出的。

@keyframes简介

使用animation特性表述CSS3动画电影需要2步：

（1）表述动画电影 ；（@keyframes）

（2）调用动画电影；（animation）

在CSS3中，在使用动画电影之前，我们必须使用@keyframes规则表述动画电影。

句法：

我们能使用@keyframes规则表述动画电影，但是这样表述的动画电影并不会自动执行，我们还需要“调用动画电影”，这样动画电影才会生效。其实这就跟JavaScript的函数一样，首先必须表述函数，接着只有调用函数，函数才会执行生效。

1.2 动画电影animation

说明：注意，animation-name 调用的动画电影名需要和@keyframes规则表述的动画电影名称完全一致（区分大小写），如果不一致将不具有任何动画电影效用

如果动画电影合写的句法：animation: name duration timing-function delay iteration-count direction;

sizes的自由定制案例：

执行数个动画电影案例：

Transform

transform特性应用于原素的2D或3D转换。字面上就是变形，发生改变的意思。

这个特性允许将原素展开旋转，缩放，移动，倾斜等。