js过渡效果_CSS3 过渡、动画

过渡 transition

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 指定要添加效果的CSS属性
• 指定效果的持续时间。

如果未指定的期限，transition将没有任何效果，因为默认值是0。

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时（代码示例）：

当鼠标光标移动到该元素时，它逐渐改变它原有样式

JS Bin​js.jirengu.com

浏览器兼容：

属性

• transition 简写属性，用于在一个属性中设置四个过渡属性
• transition-property 规定应用过渡的 CSS 属性的名称
• transition-duration 定义过渡效果花费的时间
• transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"
• transition-delay 规定过渡效果何时开始。默认是 0

代码示例：

JS Bin​js.jirengu.com

动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。

要创建 CSS3 动画，需要先了解 @keyframes 规则。

属性
1.@keyframes

@keyframes 规则是创建动画，指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

• 规定动画的名称
• 规定动画的时长
• 必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。

2.animation

1. animation 所有动画属性的简写属性，除了 animation-play-state 属性

2. animation-name 规定 @keyframes 动画的名称

3. animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0

4. animation-timing-function 规定动画的速度曲线。默认是 "ease"

• ease默认。动画以低速开始，然后加快，在结束前变慢
• linear动画从头到尾的速度是相同的
• ease-in动画以低速开始
• ease-out动画以低速结束

5. animation-delay 规定动画何时开始。默认是 0

• animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"
• normal默认值。动画按正常播放
• reverse动画反向播放
• alternate动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
• alternate-reverse动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

6. animation-iteration-count属性定义动画应该播放多少次

• n一个数字，定义应该播放多少次动画
• infinite指定动画应该播放无限次（永远）

6. animation-play-state 规定动画是否正在运行或暂停。默认是 "running"

• running指定正在运行的动画
• paused指定暂停动画

代码示例：

1. 把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

JS Bin​js.jirengu.com

2. 当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

JS Bin​js.jirengu.com

3. 改变背景色和位置：

JS Bin​js.jirengu.com

4. 画一个太极：

JS Bin​js.jirengu.com

浏览器兼容