CSS3 中的动画(animation 篇)

一些解释

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 秒,看一下

或者,换个动画效果,试试 rollInzoomIn
这里有更多好玩的动画效果。

以上代码中,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>

看看效果
在 vue 中使用动画:

  • 只需要把动画的元素用 transition 标签包起来
  • 给这个 transition 标签一个名字(比如 target)
  • 添加入场动画 class 类名是“标签名字 + enter-active”
  • 定义动画效果(@keyframes)

这样,元素(或者组件)在 v-if、v-show 切换时,动画效果就会显示出来。
更多内容请参考 vue 的文档

其他

提醒

尽管上面为了方便,提供了对应代码的在线测试,但是码者还是建议手写一遍,感受一下用 animation 写动画的过程。

兼容性

animation 的兼容性一直是一个问题,古老的浏览器是不支持的,用的时候,应先查查
但是,animation 无疑具有很好的发展前景。

参考

发布了44 篇原创文章 · 获赞 25 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/csdn372301467/article/details/90694121