在CSS3中新增了元素的过渡效果属性：transition
transition也是一个复合属性，包括四个值分别是：
1. transition-property
2. transition-duration
3. transition-timing-function
4. transition-delay
基本使用如下：
-
transition-property用于设置要过渡的属性
默认值为：all；表示对象的所有属性变化时都会由过渡效果
也可以单独设置一个属性transition-property:width;
也可以设置为none，表示不指定过渡 -
transition-duration表示过渡所花时间
默认值为：0；表示过渡时间瞬间完成
也可以设置多少秒或者多少毫秒 -
transition-timing-function 其中timing本意是调速的意思。所以这个transition-timing-function 表示过渡的动画类型。默认值为
ease，表示平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)，除此之外还有几个值：
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：等同于 steps(1, start)
step-end：等同于 steps(1, end)
注意：
steps(<integer>[, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>)：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内 -
transition-delay
表示延迟时间，可以设置多少毫秒或者秒
多个属性可以单独设置，也可以通过transition一起设置
例如：点击按钮时，方块宽度由100px变成200px，延迟1s，过渡时间用了2s，速度是按照cubic-bezier设定的一个速度
<head>
<style>
div {
transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
width: 100px;
height: 100px;
background-color: #f42
}
</style>
</head>
<body>
<div></div>
<button>点我</button>
</body>
<script>
var odiv = document.getElementsByTagName('div')[0];
var btn = document.getElementsByTagName('button')[0];
btn.addEventListener('click', function () {
odiv.style.width = '200px';
console.log("clicked!!")
}, false);
</script>
以上就是transition的基本使用！
网友评论