js过渡效果_CSS3过渡、动画
过渡 transition
CSS3 过渡是元素从⼀种样式逐渐改变为另⼀种的效果。
要实现这⼀点，必须规定两项内容：
指定要添加效果的CSS属性
指定效果的持续时间。
如果未指定的期限，transition将没有任何效果，因为默认值是0。
指定的CSS属性的值更改时效果会发⽣变化。⼀个典型CSS属性的变化是⽤户⿏标放在⼀个元素上时（代码⽰例）：当⿏标光标移动到该元素时，它逐渐改变它原有样式
JS Bin j s.jirengu
浏览器兼容：
属性
transition 简写属性，⽤于在⼀个属性中设置四个过渡属性
transition-property 规定应⽤过渡的 CSS 属性的名称
transition-duration 定义过渡效果花费的时间
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"
transition-delay 规定过渡效果何时开始。默认是 0
代码⽰例：
JS Bin j s.jirengu
js控制css3动画触发动画
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 j s.jirengu
2. 当动画为 25% 及 50% 时改变背景⾊，然后当动画 100% 完成时再次改变：JS Bin j s.jirengu
3. 改变背景⾊和位置：
JS Bin j s.jirengu
4. 画⼀个太极：
JS Bin j s.jirengu
浏览器兼容

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。