时至今日在Web中开发动效有很多种方式，有纯CSS的方式（Animations和Transitions），也有Web Animation API和SVG Animation，还有很多优秀的JavaScript库（比如，Anime.js、KUTE.js、Mo.js等）。在WebGL方面有Three.js、PixiJS、Babylon.js和PlayCanvas等。除此之外，业内还有一个制作动画非常出色的平台，那就是GSAP（GreenSock Animation Platform的简称）。在接下来的日子中，将会不间断的发布一些关于GSAP制作动效相关的教程，今天这篇文章，主要和大家先探讨一些GSAP的基础知识。

如果你阅读过上一篇《初探GSAP》文章，我想你对GSAP有了一个初步的认识。而且文章中也提到过，使用gsap.timeline()这个API可以帮助我们轻易的控制动画的时序。换句话说，让我们控制动画变得更简单，效果更好。今天这篇文章，我想花更多的时间和大家一起来探讨GSAP中的Timeline，即 **gsap.timeline()**的使用。

clip-path是CSS属性之一，只不过很多同学都担心浏览器对他的兼容性，因此不怎么使用该属性。其实clip-path已经得到很好的支持，可以说现在主流浏览器对他的支持已经很好了。事实也是这样，就我自己而言，早在去年中开发的项目就已经有clip-path的身影了。在CSS的世界中，clip-path是一个很有意思的属性，他可以帮助我们绘制很多不同规则的图形（除了常见的圆形，椭圆形，矩形，三角形等），而且结合CSS的transition或animation的话，clip-path能帮助我们实现一些很有意思的动画效果。接下来，就和大家聊聊使用clip-path制作Web动效的一些事情。

变开动效他有一个专业名词，叫作 Morphing Animation，简单地说从一种图形平滑过渡到另一张图形，也就是把两个（或多个）图形在变化时间上作线性的内插。而这种动画效果在Web上的使用也越来越频繁，比如说，两个状态下图标变形有一个动画效果。既然变形动效越来越受青眯，那么今天就来和大家聊聊如何创建变形动效的效果。

Web动效在Web应用中所起的作用就不说了。有人说，Web动效可以给Web起到锦上添花效果，也有人说，Web动效可以增加用户的粘性和吸引力。就目前来说，在Vue框架体系下，可以使用<transition>组件来构建Web动画效果，其实在React体系下，也可以使用类似的方式来给Web元素添加动画效果。接下来，就和大家一起探讨，在React框架如何将CSS的trasition和animation运用到元素中，让Web元素动起来。如果你对这方面知识感兴趣的话，欢迎继续往下阅读。

时至今日Web动效已经不是什么新鲜事了，在很多Web页面或Web应用上都有Web动效的身影。承载Web动效的方式也很多种，比如早期的Gif动效，也有人用视频来表示动效，也有使用JavaScript构建动效（比如Canvas，WebGL构建），还有一些JavaScript库构建动效以及CSS构建Web动效等。不过，近几年更多的是在探讨如何快速生产，并且还原动效。针对于这方面，在业内Lottie动效算是流行的一种，也是口碑很好的一种。今天我们就来看看，如何在React中借助Lottie的能力，快速还原Web动效。

前段时间在《Lottie Web动效在React中的构建》一文中和大家聊了如何通过lottie-web将AE导出来的JSON文件自动生成动效。在该文中，聊的主要是设计软件Figma、Sketch和AE软件之间如何通过相关的插件完成设计资源的互通，并从AE导出动效相关的JSON文件。这些都是最基本的操作链路，但在使用lottie-web还有相应的API可用来控制Lottie动效。今天这篇文章我们主要来聊聊Lottie Web动效的基本原理。

一直以来我都热衷于使用CSS来制作动效，特别是随着CSS Houdini的到来，能更轻易的帮助我们实现一些优秀的动画效果。但不管怎么样，她在制作动效，特别是创建引人注目的动画有时也非常的棘手。即使你对CSS制作动效非常的了解，但很难避免制作动效带来的高开发成本，也因此，开始探讨Lottie Web来快速帮助我们还原Web动画效果，提高效率，提升效果。不过是哪一种，都需要开发者对其有较深的了解，才能在开发动效的时候不会感到棘手。特别是在一些框架开发体系下（比如React）开发动效，更令大家感到困惑，不过幸运的是，Framer 为大家带来一个开源的React动画库，即 Framer Motion。

开发者基于Framer Motion可以制作出漂亮的动效，而且开发过程非常简单，甚至可以说是傻瓜式开发。这是因为Framer Motion为开发者提供了可用于开发动效的API。这些API都是声明式的，通过props来驱动的。在这篇文章中，我们将仔细看看如何使用Framer Motion帮助我们快速地创建令人敬畏的动效。如果你也对此感兴趣的话，请继续往下阅读。

最近在Codepen上看到了@Adir写的随机翻牌和找蛋蛋（可以想象是砸金蛋）效果，让我再次刷新了对CSS的认知。看到这两个效果之后我才知道，在CSS中除了可以实现 动态计算 ， 逻辑运算 和 状态切换 之外，也可以使用纯CSS实现随机效果。你是否和我一样，听到纯CSS实现随机效果有点不可思议，但这是事实，在CSS中，我们可以借助CSS动画的能力来模拟部分随机效果。如果你也想了解CSS如何实现随机效果的话，那阅读这篇文章你将知道其中的原委。

在Web中制作动效姿势有很多种，比如说纯CSS制作动效，JavaScript制作动效等。但话又说回来，如果你使用CSS来制作动效的时候会有不少的限制，虽然说CSS自定义属性的到来给CSS制作动效带来不少的变化，但还是有一定的缺陷在这里面。不过，CSS Houdini的到来，不说其自身的Animation API，就说他的自定义属性的出现，就可以帮助我们弥补CSS开发动效带来的缺陷和限制。换句话说，CSS Houdini的自定义属性 @property 可以扩展CSS的动效，也可以帮助我们提高CSS开发动效的能力。这篇文章，主要就是和大家一起来探讨，CSS Houdini的自定义属性是如何扩展动效开发的能力。