平面设计已成为2016年可见的趋势，显然，这就是SVG用法又重新走入人们的视野的原因。好处有很多: 独立的分辨率、跨浏览器兼容性以及DOM节点的可访问性。本文中，我们将看看如何使用SVG从简单的插图创建看似复杂的动画。

CSS 的 animations （动画） 和 transitions（变换）擅于实现从点 A 到点 B 的直线运动，运动轨迹是直线路径。给一个元素添加了 animation 或者 transition 以后，无论你如何调整贝塞尔曲线，都无法让它沿着弧形路径运动。你可以通过自定义 timing function 属性，做出弹动的效果，但是它沿着 X 和 Y 轴相对移动的值永远是相同的。

在CSS中要实现一个动画按一个指定的路径运动，相对而言是较为困难的。虽然通过transform能模拟出来一定的效果，但要达到很完美的效果是非常的痛苦的，也较为困难的。那么今天给大家介绍的motion-path属性虽然 还未成为W3C中的正式规范，但这个属性能帮助大家轻易实现一个动画按指定路径运动。

最近，我在CodePen上看到了一个Twitter心形点赞动画。一般，如果我有时间就会研究案例代码，看是否可以进行利用或更改。在这个案例中，我很惊讶的看到演示使用的是Sprites图片。后来我学习了Twitter对其实现的原理。当然，这可以不使用图片就可以实现，不是吗？

一直以来我都想做一个滚动文本的效果，虽然有几种方法实现，其中还有使用WebGL的方法。但我还是想使用HTML和CSS来实现这样的效果。很多年以前，在Web上实现滚动文本的动画效果一般是采用marquee标签来实现，当然也有很多同学采用JavaScript来实现类似的效果。前几天在CodePen看到有位大神使用纯CSS制作了一个3D的滚动文本效果，仔细看了一会，没想到thenewcode.com/就有介绍这个案例的文章，今天将篇文章翻译出来和大家一起分享。

自从Web界面引入平面设计之后，动画的质量变得越来越重要。通过给界面添加动画效果，可以直接影响产品的整体风格，动画也可以让复杂的交互变得简单，优秀的动画设计也能更好的提高用户体验。但如何创建一个高质量的动画呢？Easing Curves就变得很重要，它也成为动画的一个核心功能，能让动画变得更棒。

贝塞尔曲线(Bezier curves)是曲率的一种典型代表，而且在很多应用中都会运用到，比如计算机的图形学中、字体和动画。如果你以前玩过CSS，那么你可能就运到过贝塞尔曲线。例如，在CSS的时间函数(timing function)中就有一个贝塞尔曲线——x轴和y轴的距离用来确定时间。

几个星期前，我发现Twitter上几乎每个人的star都转向了一颗心。无疑这是一个很大的讨论的话题之一···但是我所在意的是··这个动画的实现是否只用CSS就可以实现呢(不是单一的图片或者SVG)？我知道这并不很重要，但是当这个想法出现的时候，我简直不能入睡直到可以想出一个可行的方案。经过一些实验后，我终于有了我的答案。结果并不完美(大量的SCSS / CSS -大约400行)，但是也是令人满意的(至少基于我的期望)。

CSS Animation在Web Animation中已不是新技术，不过在制作动画的时候，或许常常纠结timing-function如何使用。一般情况之下，都会使用animation-timing-function/transition-timing-function自带的几个关键词动画函数。稍为熟悉Web Animation的同学可能会使用cubic-bezier.com帮助自己创建一些timing-function。往往这一切都只是局限于使用，而不知道其原理究竟是什么。

几年前，当CSS动画刚出来的时候是多么的令人兴奋，那时Chris Coyier问我，有没有什么方式使用CSS让元素绕一个圆形的路径运动。当时，它只是一个有趣的想法，但我在无意中发现有很多这方面的用例。例如，Google+添加新成员就使用了这样一个动画。当时我和Chris都没有想出一个合理的方式来解决这个问题。我们可以想出的最好方法是通过多个关键帧绘制近似一个圆形的路径，显然这不是一个好的主意，也没有任何方式能定义出来这样的圆形路径。那么我们必须得想出一个更好的方法，对吗？