大家好，欢迎来到雄雄的小课堂，前面，我们将CSS的变形和过渡都整理了，有需要的可以移步这里看：

CSS3中的动画示例

CSS3的几个变形案例……

今天，我们来看看CSS3的动画。

CSS3使用动画分为两个步骤：

1.通过类似flash动画的关键帧来声明一个动画。

2.在animation属性中调用关键帧声明的动画，实现一个更为复杂的动画效果。

接下来我们具体来看看CSS3是如何实现动画的？

01

设置关键帧

在CSS3中，把 @keyfreams成为关键帧，这个关键帧可以设置多段属性，其语法为：

@keyfreams name{

       from{//CSS代码}

       percentage{//CSS 代码}

       to{//CSS 代码}

}

也可以将from、percentage和to换成百分比，如下：

@keyfreams name{
       0%{//CSS代码}
       50%{//CSS 代码}
       100%{//CSS 代码}
}

语法解析：

name:动画的名称，通过该名称来调用该动画

percentage（50%） ：是一个百分比，主要用来定义某个时段的动画效果。

下面我们来看一段代码：

Html代码：

<div style="background: darkgoldenrod;" id="div7">

CSS样式代码：

/*声明一个动画*/
      @keyframes name{
        0%{
          width: 200px;
          height: 200px;
          background: yellow;
        }
        50%{
          width: 400px;
          height: 400px;
          background: green;
        }
        75%{
          width: 500px;
          background: black;
        }
        100%{
          width:600px ;
          height: 600px;
          background: cornflowerblue;
        }
      }

02

调用动画

@keyfreams只是用来声明动画效果的，但是如果不调用它的话，它就不会起什么效果，下面我们来看看怎么通过animation来调用动画。

语法：

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode

语法好长，下面来解释一下吧。

animation-name：调用的动画名称

animation-duration animation-timing-function animation-delay：分别是过渡时间，过渡方式，延迟时间。

animation-iteration-count：动画的播放次数，可以是整数，如果是infine的话，则是无限循环。

animation-direction：动画播放的方向，normal表示向前播放，alternate表示一前一后（播放次数偶数向前播放，奇数则反方向播放）。

animation-play-state：动画的播放状态，running和paused.

下面我们来看看调用动画的代码：

#div7:hover{
        animation:name 1s infinite alternate ease-in-out;
      }

效果如图所示：

​编辑