h5学习笔记之CSS3过渡与CSS3动画

一、CSS3-过渡属性
transition: property duration timing-function delay;
transition-property: 过渡属性的名称 有 all（所有的过度运动） 或者具体名字
transition-duration: 过渡属性花费的时间
transition-timing-function: 过渡效果速度曲线 有 linear（匀速） ease （慢速开始，然后变快，然后慢速结束）
ease-in （慢速开始） ease-out （慢速结束） ease-in-out （慢速开始和结束）
transition-delay: 过渡效果延迟时间
具体作用1：看代码，transition 可以单独控制两个过度，用逗号分开，

        #box{
		width:50px;height:100px;background:red;
		transition:width 1s,height 2s 1s;             
		
	}
	#box:hover{
		width:300px;height:300px;
	}

具体作用2：以下代码会形成循环，犹如进度条，由于下面代码使用回调函数使原函数绑定与过渡完成后，所以一开始原函数执行完后过度完成执行回调函数，回调函数是原函数，原函数执行后，过度完成后，又会执行回调函数

div{width:0px;height:20px;background:red;
		border-radius:10px;
		transition:all 10ms linear;            每一次过度10ms 匀速
		</style>
		<div id="box"></div>
		<button id="play">播放</button>
		<button id="pause">暂停</button>
		<script>
			var oDiv = document.getElementById("box");
			var oPlay = document.getElementById("play");
			var oPause = document.getElementById("pause");
			oPlay.onclick = function(){
				move();
				addEnd(oDiv,move);
			}
			oPause.onclick = function(){
				removeEnd(oDiv,move);
			}
			function move(){
				oDiv.style.width = oDiv.offsetWidth+1+"px"; 
			}		
			function addEnd(obj,fn){
				obj.addEventListener('webkitTransitionEnd',fn);//监听机制：动画过渡完成，在这里绑定的是动画过渡完成后执行后面的fn
				obj.addEventListener('transitionend',fn);
			}
			function removeEnd(obj,fn){
				obj.removeEventListener('webkitTransitionEnd',fn);//监听机制：动画过渡完成，回调函数
				obj.removeEventListener('transitionend',fn);
			}

二、CSS3-动画
animation: name duration timing-function delay iteration-count direction;
// 名称 时间 速度 延时 次数 方向
animation-name: 动画名称
animation-duration: 动画执行时间
animation-timing-function: 动画速度曲线
animation-delay:动画效果延迟时间
animation-iteration-count: 动画执行次数 值有 n次 或者 infinite（无数次，循环的意思）
animation-direction:动画执行方向 normal 正常顺序(默认值) alternate 动画反向播放，如进度条，进度条向前到尽头后再慢慢向后回来
animation-play-state:动画执行状态 paused 暂停动画 running 运行动画
animation-fill-mode:动画执行过程效果是否可见 none 不改变(默认值) forwards （当动画完成后，保持最后一个属性值 ）
backwards （动画结束后，变回开始（0% 或者from）的那个值 ） both 向前和向后填充模式都被应用

@keyframes:规定动画
形式：@keyframes 动画名 {
from（与 0% 相同）{ css样式的开始点 }
to（与 100% 相同）{ css样式的结束点 }
（可以只有to）
}
如具体例子1：

#box{
			width:50px;height:100px;background:red;
			animation:mov 3s infinite linear alternate ;       //3秒完成 无限循环 匀速 反复过度
		}
		@keyframes mov{
			0%{
				width:50px;
			}
			100%{
				width:300px;
			}
		}
		#box:hover{
			animation-play-state:paused;
		}

三、各种动画的事件：
动画开始：
obj.addEventListener(“webkitAnimationStart”, fn); //animationStart
obj.addEventListener(“animationstart”, fn);
动画执行过程中触发：
obj.addEventListener(“webkitAnimationIteration”, fn); //animationlteration
obj.addEventListener(“animationiteration”, fn);
动画结束是触发：
obj.addEventListener(‘webkitAnimationEnd’,fn); //animationEnd
obj.addEventListener(‘animationend’,fn);