03.animation动画 · 程序员开发笔记

[TOC] #### animation: • Animation只应用在页面上已存在的DOM元素上，而且他跟Flash和JavaScript以及jQuery制作出来的动画效果又不一样，因为我们使用CSS3的Animation制作动画我们可以省去复杂的js,jquery代码。 #### @Keyframes • keyframes即关键帧。一般和animation配合使用。用来安排运动过程。 • animation: name duration timing-function delay iteration-count direction #### animation-name: • 定义一个动画的名称。 #### animation-duration: • 指定动画播放时长，单位为s(秒),默认值为“0”。 #### animation-timing-function: • 动画的播放方式。和transition中的transition-timing-function一样，具有以下六种变换方式：ease;ease-in;ease-in-out;linear;cubic-bezier。 #### animation-delay: • 指定延迟时间。单位为s(秒)，其默认值也是0。这个属性和transition-delay使用方法是一样的。 #### animation-iteration-count: • 指定元素播放动画的循环次数，其默认值为“1”；infinite为无限次数循环。 #### animation-direction: • 是否应该轮流反向播放动画 • 如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。 #### animation-play-state: • 控制元素动画的播放状态。有两个值，running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放。 #### animation-fill-mode animation-fill-mode : none | forwards | backwards | both; none 不改变默认行为。 forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 both 向前和向后填充模式都被应用。(both表示forwards和backwards同时存在) 实例为 h1 元素规定填充模式： h1 { animation-fill-mode: forwards; } <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #hd{ width: 300px; height: 200px; background: purple; /*指定运动规则*/ /*animation-name: hd;*/ /*指定运动时间*/ /*animation-duration: 3s;*/ /*指定运动曲线*/ /*animation-timing-function: linear;*/ /*运动延迟*/ /*animation-delay: 2s;*/ /*指定运动次数*/ /*animation-iteration-count: infinite;*/ /*animation: hd 2s linear 1s infinite;*/ animation: hd 2s infinite; } /*设置运动规则*/ @keyframes hd{ 0%{ width: 300px; } 50%{ width: 900px; } 100%{ width: 300px; } } </style> </head> <body> <div id="hd"></div> </body> </html>