CSS3 中的动画（animation 篇）

最新推荐文章于 2025-10-16 18:47:23 发布

原创最新推荐文章于 2025-10-16 18:47:23 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在CSS3中使用animate.css库创建动画效果，并展示了如何手动创建动画，包括定义@keyframes和调整动画属性。在Vue中应用这些动画的方法也进行了说明，同时提醒注意兼容性问题。

一些解释

CSS3 时代，动画不再必须依赖 js，变得更加简单、高效。
首先介绍一个常用动画库 animate.css，这里是它的 github 仓库

看看效果

先通过 cdn 方式引入

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

<style>
.target{
  background: #f0f;
  width: 100px;
  height: 100px;

  animation: bounceIn 1s;
}
</style>

<div class="target"></div>

刷新页面，就可以看到动画效果。
如果想让动画多动几下，可以添加 animation-iteration-count:3;到 .targetclass 下。
这样，动画就会播放三次，当然，也是刷新页面才能看到，看一下。
animation-iteration-count用来设置动画播放的次数。

或者，想让动画循环播放，可以设置播放次数为 infinite。看一下。

或者，想让动画放慢一点，可以设置动画的持续时间为 3 秒，这里的持续时间是一次动画的持续时间。
如果不设置动画播放次数（默认播放一次），那么动画就会持续 3 秒。
如果设置为 3 次，那么动画总时长就是 9 秒。
而设置为 infinite 则表示，每一次动画的播放时间是 3 秒，看一下。

或者，换个动画效果，试试 rollIn、zoomIn
这里有更多好玩的动画效果。

以上代码中，bounceIn、rollIn、zoomIn 这样的效果是由 animate.css 实现的。
刚接触 animate.css 时，我以为那些动画很难实现，后来发现我错了。

创建动画

现在把 cdn 移除掉，开始手写动画效果

@keyframes myFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.target{
  background: #f0f;
  width: 100px;
  height: 100px;
  
  animation: myFadeIn 1s;
}

替换掉原来的 css 代码，看看效果。
这里也可以试试修改动画持续时间、播放次数。

下面我们来解释 @keyframes 那一坨代码。

@keyframes 用来定义一个动画，其后的第一个单词，就是动画的名字（上面代码中的 myFadeIn）
最外层括号里的内容，就是动画的效果
from 和 to 分别定义两个状态，表示，动画是由 from 变成 to

就是这么简单，现在可以添加其他 css 属性，试试上面所说的东西。

from 和 to 定义动画开始和结束时的状态，除此之外，还可以定义一些中间状态，比如动画进度条在 50% 时的状态：

@keyframes myFadeIn {
  from {
    background: #f00;
  }
  50% {
    background: #fff;
  }
  to {
    background: #000;
  }
}

可以去看下效果。
同样的，也可以定义 20%、40%、51% 时的效果。

翻开 animate.css 的源码，不难发现，里面的内容不比我们目前知道的内容多出多少（比如这个），无非就是多定义了一些中间状态。

推荐使用 transform。对形状的定义更丰富。

使用动画

上面有个变宽的例子，元素的宽度由 10 变成 500，之后，又立刻回复到原来的宽度（100px）。
那么如果我们想让动画停留在 500px 宽呢？
添加 animation-fill-mode 属性就可以了：

@keyframes myFadeIn {
  from {
    background: #f00;
    width: 10px;
  }
  to {
    background: #000;
    width: 500px;
  }
}

.target{
  background: #f0f;
  width: 100px;
  height: 100px;
  
  animation: myFadeIn 1s;
  animation-fill-mode: forwards;
}

看看效果

类似的属性还有很多，可以看看 w3 的这篇文档
其他属性

当然，mdn 的文档更全面。
码者建议，不要试图记住每一个属性，而是需要的时候，去查一查。

在 vue 中的使用

当前的 vue 最新版本是 2.6，以下代码除了 vue，没有其他依赖

<style>
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.target-enter-active {
  animation: fadeIn 1s;
}
.target-leave-active {
  animation: fadeIn 1s;
  animation-direction: reverse;
}
<style>

<template>
  <button @click="show=!show">click</button>
  <transition name="target">
    <div v-if="show">hello</div>
  </transition>
</template>

<script>
export default {
  data(){
    return {
      show: false
    }
  }
}
</script>