前言：在css3中，动画效果有俩种方式：

第一种：transition 属性只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡来实现动画效果，因此只能实现简单的动画效果。transition属性功能是相同的，都是通过改变元素的“属性值”来实现动画效果。

第二种：animation 属性通过定义多个关键帧以及定义每个关键帧（@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;

关键帧的自由定制案例：

执行多个动画案例：

Transform

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

这个属性允许将元素进行旋转，缩放，移动，倾斜等。