之前看前端杂志了解到animate.css动画库，于是决定去学习一下。谁知道遇到了非常多的坑，也很少有博客记录了我这种问题，在此留下笔记，希望能帮到遇到同样问题的人。

首先是animate.css官网。 不知道你们进去是怎么样的，反正我第一次进去后发现页面的动画效果全部都失效，点右边的什么东西都没有作用。起初我还以为是官网的bug，通过百度去找了其他的效果展示网站来代替，就像这个www.dowebok.com。 那时候的我天真的以为这是什么官网的bug，导致官网效果展示不出来。这也导致了我后面学习的巨坑。

ok，这就开始了我的学习踩坑之旅，通过npm下载了默认的4.1.1版本的animate.css，然后学着别的教程一样引用类：

嗯？怎么并没有作用呢？不是说好的一加上，刷新页面就出来效果的吗？后来查看官网，发现好像是新版的类名便利，ok，兴冲冲的改成这样：

刷新，没用。 刷新，没用。 刷新，没用。 嗯？怎么还是不对，然后我又不知在什么博客上看到了说一定要通过js动态加载类才能起作用，于是：

大声告诉我，结果是什么~ 没错，当然还是失败。这时候我已经开始怀疑自己了，然后我就从之前的代替网站上把源码下载了下来，然后发现这个里面的版本是animate.css3.1.1。

难道是版本的问题？于是我就开始丧心病狂的一个个版本实验。果然，功夫不负有心人，我遇到了分水岭——3.6.1和3.7.0，往前能用，往后就无效了。

再对比两个版本，发现从3.7.0往后加入了动画延时，也就是delay的概念，难道从这个版本开始就有bug了？不对啊，用的人这么多，不应该只有我有这个问题啊。万能的度娘也都是一些类名不对之类的额教程。

折腾了3天，最后的最后，发现了问题所在——系统设置。（一口老血） 万万没想到，居然是这个地方的设置没有开启，导致了动画失效。这时候再去访问animate.css官网 终于起作用了！！！关于系统设置坑的博客真的是少之又少，这里记录一下。