@(HTML5)[过渡, 动画]
[TOC]
五、过渡与动画
过渡
transition：property duration delay timing-function
transition-property：过渡属性的名称
none：没有过渡属性
all：所有的属性都过渡(默认值)
property：具体的属性名称
transition-duration：过渡属性花费的时间 s/ms
transition-delay：过渡效果延时时间 s/ms
transition-timing-function：过渡效果速度曲线linear / ease / ease-in / ease-out / ease-in-out
过渡完成事件：
Webkit内核： obj.addEventListener('webkitTransitionEnd',function(){});
标准: obj.addEventListener('transitionend',function(){});
动画
animation: name duration delay timing-function iteration-count direction;
animation-name: 动画名称
keyframename 自定义的名字
none 无动画效果
animation-duration: 动画执行时间
animation-delay:动画效果延迟时间
animation-timing-function: 动画速度曲线linear / ease / ease-in / ease-out / ease-in-out
animation-iteration-count: 动画执行次数
次数数值 / infinite无限重复
animation-direction:动画执行方向
normal正常/alternate 动画轮流反向播放
animation-play-state:动画执行状态
paused 暂停动画 / running 运行动画
animation-fill-mode:动画执行过程效果是否可见
none 不改变（默认）
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both 向前和向后填充模式都被应用，forwards 与backwards 的
@keyframes:规定动画
@keyframes animationname {keyframes-selector {css-styles;}}
animationname 定义动画的名称。
keyframes-selector 动画时长的百分比。0-100%
from（与 0% 相同）
to（与 100% 相同）
可以只有to
css-styles 一个或多个合法的 CSS 样式属性。
动画事件：
动画开始触发：obj.addEventListener("webkitAnimationStart", fn);
obj.addEventListener("animationstart", fn);
动画执行过程中触发： obj.addEventListener("webkitAnimationIteration", fn);
obj.addEventListener("animationiteration", fn);
动画结束触发:obj.addEventListener('webkitAnimationEnd',fn);
obj.addEventListener('animationend',fn);
HTML5中的requestAnimationFrame动画优化
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();