CSS动画实例讲解

今天我们来看看用CSS如何写出加载动画
想要了解如何写CSS动画，了解属性不可少：
动画属性名：animation；
属性值有多个，这里我给大家都列举出来：
animation-name（动画名称）: move;
animation-duration（过渡时间 ）: 6s;
animation-delay（延迟时间）: 2s;
animation-timing-function（运动速度）: ease-in;
animation-iteration-count: 循环次数 infinite;
animation-direction: 运动方向 normal 正常方向 reverse反方向 alternate 先正后反 alternate-reverse先反后正
animation-fill-mode: 规定动画播放之前或之后，其动画效果是否可见
复合式写法：
animation：动画名称 动画持续时间 运动频率 动画延迟时间 动画循环次数 动画运动方向
注：以上就是关于动画的一些属性值。
一、动画名称必须有，且名称随意
二、其中特别要注意在使用复合式写法的时候,由于过渡时间和延迟时间单位都是s/ms 这里就会出现前后顺序的问题，有些同学可能就会出现错误，在这里两者的顺序是不能反的

例如：animation：1s 2s 说的是过渡时间为1s 延迟时间为2s 二者是不能反的，其余的属性可以随便写。

比较难以操控的属延迟属性，这里给大家看看延迟属性常用的操作。

相信大家网页中遇到比较多的动画而且比较烦的动画就是loading动画了，因为那代表着信号不好，刷不出来页面等一系列问题。今天我们就来看看用CSS如何去写那个效果，话不多说，看代码
“常见一”

大家可以先猜猜这会是什么效果；
注：代码中-webkit-是为了兼容浏览器 为了兼容不同的浏览器我们需要使用不同的前缀，这里以我谷歌浏览器为例前缀为-webkit-
来看效果：

因为是动画效果 这样不是很清楚的能看出，但可以根据我们以往上网的经验可以知道这是一个类似波浪从左到右的一个动画，设计此动画最重要的一笔是在动画延迟的上 也是写加载动画最精髓的地方，利用延时显现出来的一个效果。

效果二：




直接先来看看效果：
是不是也很熟悉呀，对的，这就是我们刷剧常出现“转圈圈”的烦人东西。
我们来讲讲这个效果又是如何实现的呢，在这里我们用了“定位属性”。
操作步骤讲解：
在这里我们首先用两个div嵌套了四个span 每个span通过border-radius使其变化成圆，通过定位我们让第一个div的圆分别部署在四个角，如图:

其余的四个点在哪呢？很明显因为我们给div设置的效果一样，所以其余四个点也在这四个点位置被遮挡住了，我们要出现八个点围成圆的效果呀，怎么办呢，可以用定位使另外四个点分别出现在上下左右。我们这里有更好的方法，如果我们让第二个div旋转45deg是不是就刚好出现在我们想要的位置呢？
给content2写CSS

效果如下：

然后我们去掉背景色是不是就是我们上面的那个效果呢？

这时我们再给其添加动画属性是不是就可以了呢，这里利用的也是延迟效果。详情可以看看代码。很多加载动画都是可以利用延迟属性去实现的，看到这里的小伙伴可以自己去试试看哦！

好了，今天的讲解就先讲到这里啦，有更好更快捷更炫酷的操作欢迎来补充哦！！