CSS3 过渡效果transition的基本使用

在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的基本使用！

最后编辑于：2020.08.28 10:20:21