css3 - 动画功能 — Animations功能

最新推荐文章于 2025-07-04 13:33:33 发布

原创最新推荐文章于 2025-07-04 13:33:33 发布 · 605 阅读

2 ·

CC 4.0 BY-SA版权

css3 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了CSS3的Animations功能，用于创建比Transitions更复杂的动画效果。详细讲述了如何通过定义多个关键帧和每个关键帧的属性值来实现动画，包括单个属性值变化、多个属性值同时改变以及循环播放动画的实例。同时提供了在线演示链接，帮助理解Animations的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在css3中除了可以使用Transitions功能实现动画效果之外，还可以使用Animations功能实现更为复杂的动画效果，Safari 4 以上浏览器与Chrome 2 以上浏览器对该功能提供支持。

Animations功能与Transitions功能相同，都是通过改变元素的属性值来实现动画效果。它们的区别在于，使用Transitions功能时只能通过制定属性的开始值与结束值，然后在这两个属性之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画效果；而Animatios则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

动画功能	Transitions	Animations
区别	使用Transitions功能时只能通过制定属性的开始值与结束值，然后在这两个属性之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画效果；	Animatios则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

1.一个属性值发生改变

在线演示鼠标悬停时背景颜色发生变化

html：

<div>示例文字</div>

css：

<style>
    div {
      background-color: red;
    }

    @-webkit-keyframes mycolor { /* 关键帧的集合名是 mycolor */
      0% {
        background-color: red;
      }
      40% { /* 40%表示该帧位于整个动画过程中的40%处 */
        background-color: darkblue;
      }
      70% {
        background-color: yellow;
      }
      100% {
        background-color: red;
      }

    div:hover { /* 上面创建好关键帧后在元素的样式中使用关键帧集合 */
      -webkit-animation-name: mycolor;/* 指定关键帧集合名称 */
      -webkit-animation-duration: 5s;/* 完成整个动画所花费的时间 */
      -webkit-animation-timing-function: linear;/*指定实现动画的方法*/
    }
</style>

解析：使用Animations功能的时候，如果使用的时Safari或者Chrome浏览器，要使用如下所示的方法来创建关键帧的集合：@-webkit-keyframes 关键帧集合名 {创建关键帧的代码}

2.多个属性值同时改变

在线演示

html：

<div>示例文字</div>

css：

<style>
    div {
      margin: 100px auto;
      width: 300px;
      height: 200px;
      background-color: yellow;
    }

    @-webkit-keyframes mycolor {
      0% {
        background-color: red;
        -webkit-transform: rotate(0deg);
      }
      40% {
        background-color: darkblue;
        -webkit-transform: rotate(30deg);
      }
      70% {
        background-color: yellow;
        -webkit-transform: rotate(-30deg);
      }
      100% {
        background-color: red;
        -webkit-transform: rotate(0deg);
      }
    }

    div:hover { /* 鼠标悬停动画开始执行 */
      -webkit-animation-name: mycolor;
      -webkit-animation-duration: 5s;
      -webkit-animation-timing-function: linear;
    }
</style>

3.多个属性值动画不停的循环播放

在上一段代码的基础上，把div:hover{}中的代码更改为如下代码；当鼠标放在div元素上，动画就会一直不停播放；

在线演示

div:hover {
      -webkit-animation-name: mycolor;
      -webkit-animation-duration: 5s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;/* 动画不停循环播放 */      
}

如果直接给元素添加样式，则页面打开就会自动播放；如下：

在线演示

div { /*直接添加*/
      -webkit-animation-name: mycolor;
      -webkit-animation-duration: 5s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite; /* 动画不停循环播放 */      
 }

4.实现动画的方法

方法	变化速度
linear	动画开始到结束匀速进行
ease-in	动画开始时速度很慢，然后速度加快
ease-out	动画开始时速度很快，然后速度放慢
ease	动画开始时速度很慢，然后速度加快，然后速度放慢
ease-in-out	动画开始时速度很慢，然后速度加快，然后速度放慢

动画小例子

在线演示动画先快后慢

html:

<div></div>

css：

<style>
      @-webkit-keyframes mycolor {
        0% {
            width: 100px;
            height: 100px;
        }
        100% {
            width: 500px;
            height: 500px;
        }
      }

      div {
        background-color: red;
        width: 500px; /*如果不加宽和高，那么动画结束，页面是空白；添加之后动画结束显示500px*/
        height: 500px; /*如果不加宽和高，那么动画结束，页面是空白*/

        -webkit-animation-name: mycolor; /* 指定关键帧集合名称 */
        -webkit-animation-duration: 5s; /* 完成整个动画所花费的时间 */
        -webkit-animation-timing-function: ease-out; /*指定实现动画的方法*/
      }
</style>