css3 动画，css3动画keyframe

CSS3动画

CSS3动画是一种无需使用JavaScrit或Flash即可实现的网页动画技术，它建立在既定的CSS语法之上，具有简单易用、性能优异等特点。小编将深入探讨CSS3动画的核心概念，包括动画的创建、关键帧的使用以及动画属性的应用。

1.CSS3动画的优势

1.建立在熟悉的基础上；使用既定的CSS语法。CSS3动画利用了开发者已经熟悉的CSS语法，使得学习曲线平缓，易于上手。

2.动画配置与属性

2.动画配置

给元素应用动画配置时，常用的基本属性包括：

animation-name:指定具体的动画（具体的关键帧）。

animation-duration:设置动画所需时间。

animation-delay:设置动画延迟。

3.CSS3动画的应用实例

3.背景图片替换（ackground-image）使用ackground-image属性可以直接替换元素的背景图片。

4.@keyframes规则

4.使用@keyframes创建CSS动画使用@keyframes创建CSS动画的用法与CSS过渡类似，区别在于动画中v-enter类名在节点插入DOM后不会立即删除，而是在animationend（动画结束）事件触发时删除。

5.动画类型

5.实现渐变动画使用transition属性可以实现渐变动画。

6.实现转变动画利用transform属性可以实现元素的转变动画。

7.实现自定义动画animation属性可以用来实现自定义动画。

6.纯CSS3实现人物摇头动画

6.人物摇头动画通过纯CSS3实现人物摇头动画，可以极大地提升页面的动态效果。

在实现人物摇头动画时，我们可以使用以下CSS3属性：

-transform:用于改变元素的位置、大小、形状等。

rotate:用于旋转元素。

transition:用于平滑地过渡动画效果。

通过组合这些属性，我们可以创建一个生动的人物摇头动画。例如，以下是一个简单的摇头动画示例：

摇头动画{

animation:摇头2sinfinite

keyframes摇头{

transform:rotate(0deg)

transform:rotate(10deg)

transform:rotate(0deg)

transform:rotate(-10deg)

transform:rotate(0deg)

在这个例子中，@keyframes摇头定义了动画的关键帧，animation:摇头2sinfinite则设置了动画的持续时间（2秒）和无限循环播放。

通过以上对CSS3动画的学习，我们可以看到CSS3动画在网页设计中的强大作用。它不仅能够提升网页的视觉效果，还能减少对JavaScrit或Flash的依赖，从而提高页面的性能。掌握CSS3动画，将为你的网页设计带来无限可能。