System Extension Blocked - warning

这个博客有大量的css内容，有svg，TweenMax等教程，抽空通读一下

GSAP(GreenSocks Animation Platform)是一个性能较好的前端动画库。最近在写一个前端SVG动画编辑器时选择了它作为底层的动画库。为了减少踩坑，我大致浏览了它的源代码，这篇文章主要是对我的理解进行记录。 我会先简单介绍一下这个动画库的API，再介绍它的插件机制，最后会从一个用例出发跟踪其运行机制。

简单来说，CSS 滤镜就是提供类似 PS 的图形特效，像模糊，锐化或元素变色等功能。通常被用于调整图片，背景和边界的渲染。本文就会围绕这些滤镜展开，看看具体能怎么使用或者玩出什么花活。

运动效果 实例化对象.set() 立刻运动到指定地点，不用加时间

vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题，譬如ul里面要接上li的标签，引入is的属性后，你完全可以写成这样

TweenMax.js集成了GreenSock动画平台的大部分核心功能,且具有极高的兼容性。

TimelineMax是GreenSock 动画平台中的动画组织、排序、管理工具，可创建时间轴（timeline）作为动画或其他时间轴的容器，这使得整个动画控制和精确管理时间变得简单，避免了通过反复delay和回调进行动画。 作者：李霖弢 链接：https://www.jianshu.com/p/8c0361e43bf5 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

动画关键词：CSS（一般可以省略） CSSPlugin用于在TweenMax中对DOM元素的CSS相关属性进行动画 在CSSPlugin中CSS属性需要写成驼峰式，例如font-size应当写作fontSize。有时候你可以在一些默认px为单位的属性中省略单位，CSSPlugin还可以在不同的单位间做动画：

用于滚动窗口（类似于window.scrollTo(x, y)）或DOM元素（如myDiv.scrollTop = y; myDiv.scrollLeft = x;）。滚动窗口时使用window作为动画目标。

1.EaseIn：即缓动发生在入口处，也就是刚开始的时候。 2.EaseOut：即缓动发生在出口处，也就是结束之前。 3.EaseInOut：就是两边都有缓动了.