CSS3 是CSS3中最为惊艳的特性之一，通过它可以轻松地打造出炫酷的网站动效，吸引更多的用户访问您的网站。

在深入学习CSS3 之前，我们需要了解CSS动画的知识点，CSS动画的本质是修改CSS属性值，通过不同的属性值变化产生不同的视觉效果。

下面我们来看一些CSS3 基础知识：

1.关键帧

关键帧是指在动画周期（即的）内某一时刻的状态，可以通过关键帧来定义动画的起始状态、中间状态和结束状态。关键帧的语法格式如下：

@ {

: ;

其中是动画名称，

是时间百分比，

是CSS属性名称，是CSS属性的值。

2.动画属性

除了关键帧外，CSS3 还有几个常用属性：

（1）-：动画周期的时间长度，单位为秒(s)或毫秒(ms)。

（2）--：动画缓动函数，用来控制CSS属性值变化的速度。

（3）-delay：动画延迟时间，即动画开始播放前的等待时间，单位也为秒(s)或毫秒(ms)。

（4）--count：动画的播放次数，可以为具体的数字，也可以为（无限循环播放）。

（5）-：动画播放的方向，可以为（正常播放）、（倒序播放）或（交替反复播放）。

3.CSS3动画常用实例

接下来我们通过几个常用的CSS3 实例来学习CSS3动画的应用：

（1）渐变动画

下面我们来实现一个渐变动画，让背景色从蓝色平滑地变化到绿色，实现代码如下：

div {

-color: blue;

width: 100px;

: 100px;

: - 1s ease 0s ;

@ - {

0% {

-color: blue;

50% {

-color: green;

100% {

-color: blue;

其中，我们通过关键帧来实现背景色的渐变，动画周期为1秒(s)，缓动函数为ease，播放方向为交替，播放次数为无限次。

（2）旋转动画

下面我们再来实现一个自旋转动画，让一个圆形图片不断地自我旋转，实现代码如下：

img {

width: 100px;

: -spin 1s 0s ;

@ -spin {

0% {

: (0deg);

100% {

: ();

其中，我们通过属性的来实现图片的旋转，0deg为起点，为终点，动画周期为1秒(s)，缓动函数为，播放方向为正常，播放次数为无限次。

（3）弹性动画

下面我们来实现一个弹性动画，让一个元素不断地从左到右弹跳，实现代码如下：

div {

width: 100px;

: 100px;

-color: red;

: - 1s ease 0s ;

@ - {

0% {

left: 0;

25% {

left: 25%;

: (-100%);

50% {

left: 50%;

75% {

left: 75%;

: (-100%);

100% {

left: 100%;

其中，我们通过关键帧来定义元素的位置和变形状态，从而实现弹性动画，动画周期为1秒(s)，缓动函数为ease，播放方向为正常，播放次数为无限次。

通过学习以上三个CSS3 实例，相信大家已经初步掌握了CSS3动画的应用，不同的场景需要不同的动画效果处理，希望大家在日后的开发中可以灵活运用CSS3 这一技术，为用户展示更加优秀的网页视觉效果。