CSS3动画，听起来高大上，但其实它就是让网页元素动起来的魔法。今天，我们就来聊聊这个话题，看看CSS3动画到底是怎么一回事。
首先，CSS3的animation属性和transition属性很相似，但它们之间有本质的区别。简单来说，transition只能实现一次性的动画效果，而animation可以连续播放。
使用animation属性实现CSS3动画，主要有两步：
- 定义动画：用@keyframes规则来定义动画的样式。
- 调用动画：用animation属性来调用@keyframes规则定义的动画。
使用@keyframes规则创建动画
在CSS3中，使用@keyframes规则来创建动画。动画就像一部电影，每一帧就是一个画面，关键帧就是电影中的关键时刻。下面是一个简单的例子：
@keyframes colorChange{
0%{
background-color:blueviolet;
}
100%{
background-color:greenyellow;
}
}这里，我们定义了一个名为colorChange的动画，它将背景颜色从蓝紫色渐变到黄绿色。
使用animation属性调用动画
animation属性是一个复合属性，主要包括6个子属性，比如动画名称、持续时间、速率变化方式等等。这里，我们重点介绍几个常用的子属性：
- animation-name：定义要调用的动画名称。
- animation-duration：定义完成一个动画周期所需要的时间。
- animation-timing-function：定义动画的速度曲线。
- animation-delay：定义执行动画之前等待的时间。
- animation-iteration-count：定义动画的播放次数。
- animation-direction：定义动画的播放方向。
实例：loading效果
这里，我们通过一个简单的loading效果来演示如何使用animation属性。代码如下：
@keyframes loading{
0%{
transform:scaleY(1);
}
50%{
transform:scaleY(0.5);
}
100%{
transform:scaleY(1);
}
}
.contain>i:nth-child(1){
left: 0;
animation: loading 1s ease-in 0.1s infinite;
}运行结果就是一个简单的loading效果，元素会不断地伸缩。
CSS3动画的应用非常广泛，比如制作网页特效、游戏界面等等。掌握了CSS3动画，你的网页将变得更加生动有趣。
我是苏承栈，来自极星编程网（www.jxgpc.com），一个追求极致的编程高手。如果你对CSS3动画还有其他疑问，欢迎访问我们的网站，获取更多精彩内容。