【Day 26】CSS Animation - CSS 动画资源蒐集与使用教学

by CSS Animations- Guide to Cubic Bezier Curves

关於 CSS Animation 的基本介绍与使用方法，笔者推荐这几篇文章：

1. 完整解析 CSS 动画 ( CSS Animation ) - 最推荐！
2. MDN | CSS 动画
3. [笔记] CSS动画Animation --- @keyframes
4. Summer | CSS3 Animation
5. CSS-TRICKS - animation

本篇文章主要会分享 CSS Animation 的动画资源与简单的使用教学。

Animate.css ➜ 官网

Animate.css 是一个纯 CSS 的动画特效库，支援非常多种动画效果，只要点选右方的动态名称就可以即时观看特效：

安装

有两种安装方式，使用 CDN 请将以下程序码放到 head 内：

CDN

<!-- Animate.css v4.1.1 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

npm

$ npm install animate.css --save

基本用法

安装 Animate.css 之後，只要在需要加动画的标签 / 元素上，添加 CSS animate__animated 以及任一动画名称如 animate__bounce（请记得前缀 animate__！）

<h1 class="animate__animated animate__bounce">An animated element</h1>

这样该元素就会有 bounce 的动画了！
其余动画的设定方式仅需要更换 animate__ 之後的名称即可。

使用 @keyframes

若是不想更动 HTML，也可以使用 @keyframes 的方式，从 CSS 为元素添加上动画 keyframe 和持续时间：

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* 引用动画的 @keyframe 名称 */
  animation-duration: 2s; /* 别忘了设定持续时间 */
}

CSS 自定义属性

从最新的版本 4 开始，Animate.css 使用 CSS Variables（变数）的方式来定义动画的持续时间和延迟时间，这让 Animate.css 在使用上更灵活且客制化。
如需要更改动画时间，只需要额外将新的数值添加到指定的动画名称上，或是更改全部的动画时间：

/* 更改 特定 的动画持续时间 */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* 更改 全部 的动画持续时间、延迟时间 */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

范例

以上用法的简单使用范例可以看 ➞ Codepen

Animista ➜ 官网

Animista 也是一个纯 CSS 的动画特效库，比起 Animate.css，笔者更喜欢 Animista 的使用介面和操作流程。

点进 TRY ME! 後，最上方是动画效果的名称，每个动画又细分成各种不同方向的显示效果，选择非常多样！

每个动画的左方为可以调整的选项（OPTION），包含显示的物件（select object）、持续时间（duration）、动画跑动效果（timing-function）、延迟时间（delay）...等等。
调整好後就可以按下右方的程序码符号 ➞ {・}，进入程序码页面：

看到程序码後，笔者建议将 Autoprefixer 打勾，可以解决在部份浏览器中动画失效的问题。
而 Minify (最小化) 要不要打勾就看专案需求，如不需要修改这个动画可以打勾，节省一点流量。
以 scale-up-center 效果为例，程序码如下：

CSS

.scale-up-center {
	-webkit-animation: scale-up-center 0.4s cubic-bezier(0.190, 1.000, 0.220, 1.000) both;
	        animation: scale-up-center 0.4s cubic-bezier(0.190, 1.000, 0.220, 1.000) both;
}

CSS keyframes

/* ----------------------------------------------
 * Generated by Animista on 2020-10-18 2:14:26
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-up-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

笔者的使用习惯是：在专案的 CSS 资料夹内，额外新增一个 animation.css ，把需要新增的动画 keyframes 归纳进去，再将该动画的 animation 贴到需要制作动画的元素 css 内。

这样做的好处是可以很方便的管理专案使用到的动画库，也可以快速的移除或修改动画持续时间，也避免专案载入过多没有用到的动画。

以上是笔者在工作上最常用的两个免费动画资源，希望可以帮助到需要制作动画的网页设计朋友：）