前言：在CSS3中，动画效果有俩种方式：
第一种：transition 属性只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡来实现动画效果，因此只能实现简单的动画效果。transition属性功能是相同的，都是通过改变元素的“属性值”来实现动画效果。
第二种：animation 属性通过定义多个关键帧以及定义每个关键帧（@keyframes）中元素的属性值来实现复杂的动画效果。
transition
设置元素当过渡效果，可以实现元素不同状态间的平滑过渡，经常用来制作动画效果。
参数：
css3 动画讲解
transition-property 语法
css3 动画讲解
transition-duration 语法
transition-duration: time;
css3 动画讲解
transition-timing-function 语法
css3 动画讲解
css3 动画讲解
transition-delay 语法
css3 动画讲解
transition的优点在于简单易用，但是它有几个很大的局限。
transition需要事件触发，所以没法在网页加载时自动发生。
transition是一次性的，不能重复发生，除非一再触发。
transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有一个开始状态和结束状态。
一条transition规则，只能定义一个属性的变化，不能控制多个属性。
Animation就是为了解决这些问题而提出的。
使用animation属性定义CSS3动画需要2步：
（1）定义动画 ；（@keyframes）
（2）调用动画；（animation）
在CSS3中，在使用动画之前，我们必须使用@keyframes规则定义动画。
语法：
css3 动画讲解
我们可以使用@keyframes规则定义动画，但是这样定义的动画并不会自动执行，我们还需要“调用动画”，这样动画才会生效。其实这就跟JavaScript的函数一样，首先必须定义函数，然后只有调用函数，函数才会执行生效。
css3 动画讲解
如果动画合写的语法：animation: name duration timing-function delay iteration-count direction;
css3 动画讲解
css3 动画讲解
关键帧的自由定制案例：
css3 动画讲解
执行多个动画案例：
css3 动画讲解
transform属性应用于元素的2D或3D转换。字面上就是变形，改变的意思。
这个属性允许将元素进行旋转，缩放，移动，倾斜等。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
css3