笔记 — 动画效果（Css3）

/**
 * animation-name: 调用 @keyframes 所定义的动画
 * animation-duration: 动画周期所花费的时间长度
 * animation-timing-function: 规定动画的速度曲线
 * animation-delay: 延时执行动画的时间
 * animation-iteration-count: 动画执行的次数
 * animation-dircetion: 规定动画下一周期是否逆向播放
 * animation-play-state: 规定动画为运行或暂停状态
 * animation-fill-mode: 规定动画对象时间之外的状态
 */

element {
　　animation-name: aName;
　　animation-duration: 2s;
　　animation-timing-function: ease;
　　animation-delay: 2s;
　　animation-iteration-count: 2;
　　animation-direction: normal;　　
　　animation-play-state: running;
　　animation-fill-mode: none;
}

@keyframes aName {
　　from: {
　　　　/* 初始状态 */
　　}　
　　to: {
　　　　/* 结束状态 */
　　}
}