CSS3动画规则：简单易懂的方式
CSS3动画规则是网页设计中常用的技术之一，它可以让网页元素产生各种动态效果，提升用户体验，本文将通过简单易懂的方式介绍CSS3动画规则的编写方法。
一、CSS3动画的基本概念CSS3动画是通过改变元素的样式属性，使元素在一段时间内平滑过渡到另一个状态，CSS3提供了许多动画相关的属性和函数，如transition、animation等。
二、transition属性transition属性用于在一定的时间范围内平滑地改变元素的某个样式属性，它包括以下四个属性：
1. transition-property：指定要过渡的样式属性，如width、height、margin等。
2. transition-duration：指定过渡的持续时间，如2s、500ms等。
3. transition-timing-function：指定过渡的时间函数，如ease、linear、ease-in等。
4. transition-delay：指定过渡的延迟时间，如0s、1s等。
下面的代码将使一个div元素在2秒内平滑地改变其背景色：
div {
width: 100px;
height: 100px;
background: red;
transition: background 2s ease;
}
div:hover {
background: blue;
}
三、animation属性animation属性用于创建复杂的动画效果，它包括以下六个属性：
1. animation-name：指定动画的名称。
2. animation-duration：指定动画的持续时间，如2s、500ms等。
3. animation-timing-function：指定动画的时间函数，如ease、linear、ease-in等。
4. animation-delay：指定动画的延迟时间，如0s、1s等。
5. animation-iteration-count：指定动画的播放次数，如1、2、infinite等。
6. animation-direction：指定动画的播放方向，如normal、reverse、alternate等。
下面的代码将创建一个名为“rotate”的动画，使一个div元素在2秒内旋转180度：
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
div {
width: 100px;
height: 100px;
background: red;
animation: rotate 2s linear infinite;
}
四、关键帧动画（@keyframes）@keyframes规则用于创建关键帧动画，它允许您定义动画的不同阶段，并在每个阶段指定元素的样式属性，下面的代码将创建一个名为“scale”的动画，使一个div元素在2秒内先放大两倍，然后缩小到原始大小：
@keyframes scale {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
