最近总览我自己做的网页效果，发现网页有点low.没有页面载入效果，网页就像是简装修房子，加了animate.css动画就像是精装修房子。
让我们来体验下两种网页给人浏览带来的体验：（百度随便搜的网页）
1.不加animate.css动画效果：http://sc.chinaz.com/mobandemo.aspx?downloadid=6201934823955
2.加animate.css动画效果：http://sc.chinaz.com/mobandemo.aspx?downloadid=6201930449665
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。具体效果：点击链接即可查看他的动画效果。https://daneden.github.io/animate.css/
animate的动画效果可以应用到Shopify任何一个地方，让页面载入时候，有淡入淡出，斜切，抖动等等各种特效。让网页逼格上一个档次。此文将详细介绍Animate.css动画如何应用到Shopify的各个页面。
第一步：去此网站*载下**css文件，https://daneden.github.io/animate.css/ 然后将里面的代码复制下来，新建一个txt文件如：animate.txt，修改txt文本的后缀名为css. 此时的文件就叫animate.css了。然后将其传到Shopify后台，获取链接。
如果你觉得这个操作麻烦，这里有几个现成的链接可以用：
https://cdn.shopify.com/s/files/1/0073/3233/1565/files/animate.css?1024
https://unpkg.com/animate.css@3.5.2/animate.min.css
第二步：我现在要给page加载入bounceInDown的特效。（Debut为例）在前端随便一个page上，鼠标点击页面，按F12审查元素。找到控制页面的选择器类。如下图所示的圆圈里面的类控制着内容区域，（要添加代码，就得找到后端对应的位置。再加代码）根据这2个类名称，在代码编辑模式下，page-template.liquid文件找到后端对应的代码地方。
第三步：如下图所示位置加上动画的样式名称”animated boundceInDown”。注意：animated是要都要带上。然后将<link href=”https://cdn.shopify.com/s/files/1/0073/3233/1565/files/animate.css?1024″ rel=”stylesheet”>插入page-template.liquid文件的最顶部。保存即可。
