🌠一文带你看CSS过渡动画艺术，附带常见动效分享

作者：@wnagly19，本文已授权掘金开发者社区公众号独家使用，包括但不限于编辑、标注原创等权益。

🎈 简介

在使用手机时，都会或多或少都会接触到 过渡动画 的使用场景。从最基本的页面切换到一个按钮的点击后的常态都是动画的应用场景。这些动画无时无刻不在 优化 （欺骗）着我们的大脑，加强我们对一件事情的认知度。不同情况下不同的动画操作能够无形中引导用户进行接下来的行为。并给人脑一定反应的交互时间。

在我们的日常开发中， 过渡动画 扮演的角色非常的巧妙。大部分前端其实并不是很懂 过渡动画 之间的 交互协调 概念，在没有 交互设计师 的基础上，只能通过大脑的直观印象给出一个动画大概的执行时间和线性速度，但这往往因为个人感官的偏差导致 动效价值 的流失。

🪁 动效价值

那么我们从 Ant Motion 的动效价值来看下，为什么做动画？

它们认为，动效的价值应该是这样的：

增加体验舒适度： 让用户认知过程更为自然。
**增加界面活力：**第一时间吸引注意力，突出重点。
**描述层级关系：**体现元素之间的层级与空间关系。
**提供反馈、明确意向：**助力交互体验。

人都会有猎奇性，人们往往愿意接受一些大胆的创新，在确保不会对人脑产生障碍的情况下，好的 过渡动画 对用户来说是最直接体验产品的感官，相比于没有动画的产品来说，两者可谓是失之毫厘，差之千里。

可以尝试对手机的动画进行关闭和开启分别使用一短时间，就能有直接的感官了。

动效的体验须是流畅的，在不影响体验性能的前提下才能更好的体验价值，大量使用无意义动画导致产品卡顿实则是一个败笔。(三流产品的基本操作)

⚡CSS中的动画世界

在 CSS 中我们看过很多不可思议的操作，其实都来自于动画的 欺诈 效果。所以，我们应该认真的看看 Transition 和 Animation 是如何完成一些神奇的吧。

动画周期

动画周期是动画的核心点，它根据 时间 和 贝塞尔曲线(cubic-bezier) 的特征进行对应组合，产生视觉上的效果。

同样的，时间和线性动画都是动画中设计的难点，在大多数时候，动画应该更加高效的完成。可以看下 蚂蚁Ant Design 对动画提出的建议。

在企业级应用的设计中，动效需要在尽可能短的时间内有效的完成过渡。那么如何把握这个时间的长短呢？伦敦城市学院神经学创立者 Davina Bristow 曾提出，眨眼是人体最快的潜意识动作，大多数人每分钟眨眼 15 次，眨眼平均持续 100-150 毫秒；所以我们将这个时间段定义成 Ant Design 动效的基本时间单位。

下面几张图分别是 transition 默认的一些 贝塞尔曲线 动画展示。

(效果图来自Google浏览器Cubic Bezier Editor)

速度与激情

在 Ant-Design 中，它的设计对其把控的效果拿捏是具有深思熟虑的，细致的拿捏会让动画呈现起来恰到好处，我们不妨来看看这张图吧：

Ant-Design 组件里的基本时间单位分别是：最快时间: 100ms , 基本时间: 200ms , 较大时间： 300ms ... 100 的倍增的方式，那么基于此，我对比了其他UI组件库，总结出了一些动画较为合理的时间把控程度。我也在这里分享下吧。

$animation-time-fast: .1s;
$animation-time-base: .2s;
$animation-time-even: .3s;
$animation-time-slow: .4s;
$animation-time-cut: .7s;

🚞 方块的一生

在网页中，有我们熟知的盒模型，所有的页面都是由大大小小的盒子拼凑而成。如下图，就是一个基本的盒子模型。

因此，对于动画来说，最直观的就是对于方块运用的一些交互行为。而我们又可以将其分为几类不同的交互：

**单元素动画动画：**该动画在整个页面中独立的触发，称之为单元素动画。
**交互动画：**涉及到多个元素之间可能发生序列的动画，称之为交互动画。
**转场动画：**页面与页面之间的切换，称之为转场动画。

呈现方式

在 CSS 中，对于动画的产生有两个 API ， transition ， animation 都可能定义过渡动画。但是两者的区别是很大的。 transition 只能声明元素变化从开始到结束之间的变化关系。而 animation 则是可以自由的定义一段动画在元素上的开始和结束。甚至于，还能控制动画的执行次数。

单点元素

我们先来看一个单元素(单点)动画：

这是我们常见的一个声波信号的一个图片，我们实现起来非常的简单，

.dot {
    position: relative;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: #1890ff;

    &::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: inherit;
      border-radius: inherit;
      // animation: scale 2s ease-out infinite;
      transition: all 1s;
    }
    &:hover::before {
    transform: scale(3);
    }

这个时候，其实我们已经很明显的发现了 transition 的弊端了，它并不能自由的控制元素的形变，所有的形变都是预先设置在元素上的，而 animation 则是可以自由的组织元素发生变化的内容和次数，而不完全依赖于用户触发。

需要注意的是，如果元素从文档流直接消失，那么CSS动画和过渡属性就对其没有效果了。如：display

可以看的出， transition 的存在更多是为元素 过渡行为 而使用的，当元素发生过渡行为的时候，较为简单的动画，我们并不需要使用 animation 进行控制。因此，可以总结出：

transition：强调的是单一动画属性的过渡效果，由开始到结束的过程，中间不存在动画转折。
animation：强调的是多种动画属性的结合，能够有效的排列动画执行时间的 某时做某事 ，从开始到结束的过程可以是简单，也可以是复杂。算是 transition 的加强版。

交互动画

在 web 页面中，我们往往涉及到很多的交互动画，我们可能会涉及到部分动画的穿插，那么这个时候就需要对动画元素进行一部分的延迟操作了。

需要注意的是 animation-delay 元素依旧会显示，下图只是做一个基本的演示，完整效果可以看另一篇文章写的案例，是完全通过延迟 DOM 来实现的。

对比两者 DEMO ，左侧的是使用Vue钩子添加 setTimeout 分批去控制动画的行为，右边则是使用 animation-delay 设置了基础延迟时间，可以看到，动画只是做了延迟，但是DOM还是加载了，很明显会有瑕疵。

示例动画来自@ mmdjj：优美的v-for列表加载动画：vue动画钩子实践

⭐使用动画

诚然， Vue 提供了 transition-group 和 transition 组件，能够很好的控制一张卡片的一生，从进入到离开但是在动画的行为上，还是写成了一个 animation.scss 作为基本动画的管理，具体可以根据当前需要的动画，拼凑成为对应的 动画类 。

在写动画类的时候，我们需要注意的是，一个动画如无意外，肯定是双向的，比如最耳熟能详的淡入淡出。淡入和淡出其实就是 开始 和 结束 相反的一个过程。

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

多数时候，我们只需要进行在class中进行 类 的引用就可以使用了，如果是 vue.js 需要使用 transition 组件的话可以自己拼凑出一个动画状态类进行绑定。

🍻动画分享和阅读资源

下面来分享标题的动画资源吧，不拿出点资源估计今天很难走出掘金了。首先是一些推荐的作者写的文章，非常的棒，看完概念篇再去看实践，直接起飞。

下面是我个人觉得比较好的动画资源，写成了一个 scss 文件给大家了，独乐乐不如众乐乐。

动画样式下载地址：立即下载

总结

本片文章算是我对过渡动画体系的一个小总结，看起来很简单的过渡动画，难的不是 API 而是设计动画的过程，在一个团队中， 设计 和 交互 对于前端的体验也是重中之重，我们在开发的时候，对于其他领域的知识应该保持学习的态度。同样的，对于部分复杂的动画，如无必要也需要和交互设计进行沟通，好的动画可以给人眼前一亮的视觉体验，拖沓的动画也同样会让人疲劳。看完文章后，不妨在自己项目中去实践实践吧。

不知不觉写文章已经快两点了，坚持写作不容易，没有建群，没有公众号，只在掘金发布文章。保证不恰饭和质量文章更新，阅读完文章后，希望大家帮我一点小忙，掘金2020年度作者榜单发布了，如果您有多余的闲票，可以投一张给不恰饭的 wangly19 。

投票地址：立即投票，也可以点击我头像，进入详情后，点击年度打榜也可以哦。