css3动画animation最权威，最快速的上手总结（5）

最近接到一个任务，开发新的后台管理页面，搜索一些模板，研究布局，样式，写法，无可避免涉及到animation,有图为证

 一开始认为是圆点扩散提示效果，是用脚本，或是插件来完成的，其实仅仅样式就可以了，这就引出今天的主题，animation

最简单写法：html:<div class='div1'></div>

.div1{
width:100px;
height:100px;
background:red;
position:absolute;
animation:div1 4s;
}
@keyframes div1{
    from{
       left:0;
   }
        to{
       left:100%;
    }
}

 

简单总结下：

animation:类名称+持续时间+（变化方式,延迟时间，重复次数，重复方式，开始结束的状态）

一般给变化方式，还有重复次数，其他可以省掉，顺序颠倒应该也没有问题，但个人没有完全测过，个人建议，

顺着这个顺序写，省事

 

animation:类名称+持续时间+（变化方式,延迟时间，重复次数，重复方式，开始结束的状态）

一般给变化方式，还有重复次数，其他可以省掉，顺序颠倒应该也没有问题，但个人没有完全测过，个人建议，

顺着这个顺序写，省事

 

animation:类名称+持续时间+（变化方式,延迟时间，重复次数，重复方式，开始结束的状态）

一般给变化方式，还有重复次数，其他可以省掉，顺序颠倒应该也没有问题，但个人没有完全测过，个人建议，

顺着这个顺序写，省事

 

详细解释：

该属性的子animation属性是复合属性，一共包括八个属性：

animation-name
指定@keyframes描述动画关键帧的at规则的名称。
animation-duration
配置动画完成一个周期所需的时间长度。
animation-timing-function（变化方式：可选值有linear,ease-out......）
配置动画的时间; 也就是说，通过建立加速度曲线，动画如何通过关键帧进行转换。
animation-delay
配置元素加载时间和动画序列开始之间的延迟。
animation-iteration-count(循环次数，非负数有效，可以是小数，即完成动画序列的多少，)
配置动画应重复的次数; 您可以指定infinite无限期重复动画。
animation-direction（我理解为重复方式，normal为默认，每次从头开始，alternate从结尾开始，...）
配置动画是否应在每次运行序列中交替方向或重置为起点并重复自身。
animation-fill-mode（开始结束的状态：主要两个值，forwards 和backwards,一般不给，因为在一直重复的infinite中，没有结束开始！！！）
配置动画执行前后动画应用的值。
animation-play-state（控制动画，开始或停止，主要两个属性running和paused，一般不给，默认running）
允许您暂停和恢复动画序列。

补充一点：如果不是复合属性写法，单独写每一个属性，可以同时写多个动画名称类，即

animation-name:className1,className2;

animation-duration:2s,1s;

这个没有实际用过，暂时先不做介绍，

重点是，不要忘记加上关键帧，@keyframes name{}这就是一种声明：兼容加上@-webkit-keyframes name{}

重点是，不要忘记加上关键帧，@keyframes name{}这就是一种声明：兼容加上@-webkit-keyframes name{}

重点是，不要忘记加上关键帧，@keyframes name{}这就是一种声明：兼容加上@-webkit-keyframes name{}

0{

}

20%{

}

推荐这种写法，代替from to

 

实际应用，回到开始的圆点扩散提醒效果，样式，布局代码如下：

<div class="notify">
										<span class="heartbit"></span>
										<span class="point"></span>
									</div>

<style>


.notify{
				/*放心的给,对页面其他元素原来文档流中位置,没有任何影响*/
				position: relative;
			}
			.notify .point{	
				position: absolute;			
				right: 0;
				top: -28px;
				width: 6px;
				height: 6px;
				border-radius: 6px;
				background-color: red;				
				/*绝对定位改变了元素,行内行外元素属性，反正高宽起作用了*/
			}
			.notify .heartbit{
				/*绝对定位改变了元素,行内行外元素属性，反正高宽起作用了*/
				position: absolute;			
				right: -10px;
				top: -38px;
				/*希望圆心重叠,那么实际起点应该x移动向右一半,y向上移动一个半*/
				width: 25px;
				height: 25px;
				border-radius: 100%;
				border:5px solid red;
				/*关于动画最简单的一种给法是,animation:heartbeat 1s ease-out;指定一个循环次数*/
				-webkit-animation: heartbit 1s ease-out;
				animation: heartbit 1s ease-out;
				-webkit-animation-iteration-count: infinite;
				animation-iteration-count: infinite;
				/*-webkit-animation: 4s ease-out 0s infinite alternate heartbit;
          		animation: 4s ease-out 0s infinite alternate heartbit;*/
			}
			/*开启动画关键是定义关键帧!!!!!!!!!!!!!!!!!!!!!!!*/
			@-webkit-keyframes heartbit{
				0% {
			    -webkit-transform: scale(0);
			    opacity: 0.0;
				}
				
				25% {
				    -webkit-transform: scale(0.1);
				    opacity: 0.1;
				}
				50% {
				    -webkit-transform: scale(0.5);
				    opacity: 0.3;
				}
				75% {
				    -webkit-transform: scale(0.8);
				    opacity: 0.5;
				}
				100% {
				    -webkit-transform: scale(1);
				    opacity: 0.0;
				}
			}
			@keyframes heartbit{
				0% {
			    -webkit-transform: scale(0);
			    opacity: 0.0;
				}
				
				25% {
				    -webkit-transform: scale(0.1);
				    opacity: 0.1;
				}
				50% {
				    -webkit-transform: scale(0.5);
				    opacity: 0.3;
				}
				75% {
				    -webkit-transform: scale(0.8);
				    opacity: 0.5;
				}
				100% {
				    -webkit-transform: scale(1);
				    opacity: 0.0;
				}
			}

</style>

养成好习惯，关键性用法，来源这个网站，https://developer.mozilla.org/en-US/docs/Web/CSS/animation

如果有什么属性，忘记，或是不熟悉，建议首先在这个网站上搜索，以上内容也是看这个权威网站，

以上就是全部内容，仓促完成之处，淌有疏漏，谬误之处，权当抛转引玉，希望大家抓重点，得到一些帮助和收获就行，写更好的代码和文章。