css3动画（animation）用法

（作者：郭鑫 撰写时间：2019年1月16号）
一、自定义动画的写法：
有两种写法，但是命名写法都是一样的，其它的不同都归属于内部写法的区别

• 命名写法

@keyframes rotate1{
       //内部写法
}

@keyframes ：关键帧 用于创建一个动画
rotate1 ：你所创建的动画的名称（在符合命名规则的前提下名称自定），必须要写，方便后面调用动画
动漫属性：需要用大括号“{}”包裹起来
大致可以表示为：
@keyframes 动画名称{ //放动画属性 }

• 内部写法
  第一种：

    @keyframes rotate1{
		    form{
			   //放动画属性
		    }
		    to{
			  //放动画属性
		    }
	   }
	   

见示例：
第一种写法为form{}to{}
意思为从…到…
示例中的效果为旋转 从0度旋转到360度 即旋转一周

第二种：

    @keyframes rotate1{
			0%{
			//放动画属性
			}
			25%{
				//放动画属性
			}
			50%{
				//放动画属性
			}
			75%{
				//放动画属性
			}
			100%{
				//放动画属性
			}
    }

见示例：
第二种写法为0%{}…100%{}，0%到100%中间的分配由需要所定,自由分配
意思是从0%到100%
示例中的效果同第一种效果一样

写法一和写法二区别：
写法一中的动画在哪个时间段执行什么动作由电脑分配而写法二则可以定位动画在哪个时间段发生什么动作。写法二比写法一用的更灵活

二、动画的调用

1）使用animation 调用
2）写法：animation: 参数 ;
3）参数：一般有以下几种
animation: 动画名称 执行一次的时间 执行的次数 运动的方式;

1. 动画名称：创建动画时自定的名称

2. 执行一次的时间：以秒（s）为单位

3. 执行的次数：直接用数字表示（正整数），无限次为infinite

4. 运动的方式：默认"ease"（先加速再减速） linear为匀速

4）注意：必须要调用动画！否则不会用动画效果！