1. 概述
毛毛虫效应：
有这样一个实验，将许多毛毛虫放在一个花盆边缘，使它们首尾相接，围成一个圈。然后在离花盆很近的地方撒了一些毛毛虫的食物。
此时，毛毛虫并不会向食物的方向爬去，而是在花盆边缘，一个跟着一个的转圈，直到7天后，因为饥饿和精疲力尽相继死去。
这是毛毛虫的一种特性吧，它们喜欢跟随前者的路线行走，这也是固化思维的一种表现。
因此解放思维，有创新精神是很重要的。

言归正传，今天我们继续聊聊使用标签实现动画与过渡的效果的相关知识。

2. 使用标签实现动画与过渡的效果

2.1 推荐两个不错的动画相关的网站
2.1.1 Animate.css
网站地址：https://animate.style/
里面有很多不错的、封装好的 css 样式供使用，省了程序员很多开发工作量

文章图片


2.1.2 greensock
网站地址：https://greensock.com
此网站的主产品 GSAP ，是一套脚本动画制作工具，是对 JavaScript 的封装，解决了无数浏览器的兼容性问题，比 jQuery 快 20 倍。

文章图片


2.2 自定义样式名称
之前我们通过在 transition 标签上增加 name 属性，来自定义样式的名称，这种做法不够灵活，我们换一种更加灵活的写法，样式的名称可以完全自定义