这么炫酷的CSS动画，居然复制粘贴就可以完成

翻译 | 杨小二

来源 | https://1stwebdesigner.com/copy-and-paste-css-animation-cheat-sheets/

动画是Web和UI设计的主要内容。一个完全静止的网站，即使是使用了微妙的悬停状态，也可能感觉不一样。如果缺少动画，就像缺少必要的东西一样。

幸运的是，有很多方法可以为你的网站添加动画。WebGL，JavaScript甚至HTML5都支持或专用于动画。但最容易学习和实现的是CSS动画。

Flash是轻量级动画的另一个来源，易于为网站创建动画。但随着Flash最终被弃用，许多设计师正在转向使用其他渠道来实现漂亮的动画效果，从而提升他们的网站效果。

虽然就网络动画效果而言，CSS动画很容易学习，但它仍然需要花费大量时间来掌握它。它可以真正帮助我们在此期间学习和使用一些示例代码。

今天我们为你收集整理了一些漂亮的CSS动画效果素材库。如果你需要在设计中使用一些漂亮的动画，应用在你的网站上，进行快速测试这些代码，或者想要从提供的代码片段中学习，你一定会喜欢这些动画集。

01、CSSFX

地址：https://cssfx.dev/

CSSFX里的动画效果非常精美简单而干净，里面有数十种小而美的动画。它提供了许多有趣的加载动画和相当多的悬停状态。 你只需点击一下你喜欢的动画效果，然后，就可以直接复制这个效果的代码，并将其应用到你的网站项目中，当然，你还可以亲自了解他们是如何实现这些动画效果的。

2、Animista

地址：http://animista.net/

如果你需要定制更多个性化的动画的话， 而Animista是一个不错的选择，它提供了近20种类型的CSS动画可供你浏览参考使用。每种动画都提供了大量的额外设置，你可以根据自己的喜好进行更改设置。 然后添加保存到收藏夹里，最后单击生成按钮以获取此动画效果的代码。

【杨小二注】：这个里面除了一些基础的动画外，Animista还提供了背景动画，按钮跳动动画，文本动画等各种动画效果，如果你也热爱CSS，喜欢研究新动画的话，建议你亲自去试一试。

3、Epic Spinners

地址：https://epic-spinners.epicmax.co/

这个网站里有一些精致的动画效果，它们看起来很有趣，并且它可以让用户对页面加载所需的几秒钟感兴趣，不至于那么无聊， 当然，它们或许只是制作精美的页面装饰元素！ 在这里，你只要单击一下你喜欢的动画效果，你就可以查看其代码，这些动画效果是采用了Vue.js一起实现的。

04、缓动函数速查表

地址：https://easings.net/

缓动函数解释了动画如何在整个运动帧中加速和减速。 这样动画就可以通过线性，平滑地移动，甚至可以来回快速反弹。

如果没有任何宽松的线性动画通常很无趣。使用缓动函数功能查表可以轻松创建独特而流畅的缓动动画效果。

【杨小二注】Easing functions：缓动函数，指定参数随时间的变化率。

因为在我们的现实生活中，物体不会立即启动或停止，也不会以恒定速度移动，都是有一个速度变化的过程。关于这些速度变化的过程，大家可以自己观察体验一下，像物体下落，或者物体左右移动等等，其实，我们在做实现各种动画效果的时候，基本实例都是源自我们的生活。

而缓动函数，最常见的应用就是动画，用来指定动画效果在执行时的变化速度，使其看起来更加真实。除了动画之外，还有很多场景需要用到缓动函数，如实现一个非线性的slider，有兴趣的小伙伴，可以自行研究学习一下。

05、Transformicons

地址：http://www.transformicons.com/builder.html

Transformicons是在单击时在状态之间切换的图标。还包括一些额外的图标，如加载条和滚动指示器。只需单击即可查看正在运行的图标的预览，并切换以选择要为其构建代码的图标。

这些CSS图标确实使用了一些JavaScript，但它只有几行。干净的动画按钮非常值得。

CSS动画就是这么简单

每个站点都可以使用一点动画效果。根据你的网站风格，过多的动画可能会显得比较杂乱，但像视差和CSS这样的微妙动画效果，可以体现你的网站风格，又不会分散用户注意力。

CSS动画之所以如此普遍，是因为它们简单而好操作，同时还增加了很多个性。其他类型的动画效果可能会使某些用户打开你的网站速度变慢，但CSS动画不会。

这些动画对动画师和网页设计师都有很大的帮助。对于UI设计师来说，查看干净的代码是很有用的。 同时创建自己的动画效果会变得更加容易。对于那些不熟悉CSS动画的人来说，仍然可以获得漂亮的动画效果。

所以，一定要亲自试试这些漂亮的动画。将它们应用到你的网站上去，看看它们如何提升你的网页设计。