CSS3动画的属性和关键帧规则

　　CSS3动画是指通过CSS3的动画属性和关键帧规则来实现网页元素的动态效果。CSS3动画可以在不使用JavaScript的情况下，通过简单的CSS代码就能创建平滑、流畅的动画效果，如淡入淡出、旋转、缩放、移动等。

下面是动画的属性：

　　animation-name：定义动画的名称。

　　animation-duration：指定动画的持续时间。

　　animation-timing-function：定义动画的时间函数，用于控制动画的速度曲线，可以使用多种预设的函数(如ease、ease-in、ease-out、ease-in-out)或自定义的贝塞尔曲线函数。

　　animation-delay：指定动画开始之前的延迟时间，可以使用负值来使动画立即开始。

　　animation-iteration-count：指定动画的循环次数，可以使用具体的数字，也可以使用关键字如infinite表示无限循环。

　　animation-direction：控制动画播放的方向，可以是normal(正常播放)、reverse(反向播放)、alternate(交替正向和反向播放)或alternate-reverse(交替反向和正向播放)。

　　animation-fill-mode：定义动画在播放前和播放后的样式状态，可以是none(默认，不改变样式)、forwards(保持最后一帧的样式)、backwards(使用第一帧的样式)或both(同时应用forwards和backwards)。

　　animation-play-state：控制动画的播放状态，可以是running(运行状态)或paused(暂停状态)。

　　animation: 用于简写上述动画属性的缩写形式，可以一次性指定动画的多个属性值。

　　除了上述属性之外，CSS3还引入了关键帧(Keyframes)规则，通过在关键帧中定义元素在动画中的不同状态，实现更精细的控制。关键帧规则使用@keyframes关键字来定义，包括关键帧的百分比或关键字(如from和to)，以及在每个关键帧中应用的样式。

　　下面是一个简单的示例：

    @keyframes fade {
    　　from {
    　　    opacity: 0;
    　　}
    　　to {
    　　    opacity: 1;
    　　}
　　}
　　.div {
    　　animation-name: fade;
    　　animation-duration: 3s;
    }

　　上述示例中，通过定义名为"fade"的关键帧规则，实现了元素从透明度为0到透明度为1的淡入效果。然后，通过将animation-name设置为"fade"，animation-duration设置为3秒，将动画应用于名为"div"的元素。

　　多用css3动画，有助于减少对js动画效果的依赖。