transition 动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过度动画</title>

    <style>

    #box{
        width: 100px;

        height: 100px;

        background-color: pink;

        /*transition 过度动画 两个比写参数 第一个为动画要改变的属性 第二个为 动画执行的时间 */

        /*过度动画默认不会执行 必须动画的属性 发生改变的时候才会触发动画执行*/
        /*all 代表改变所有属性*/
        -webkit-transition: all 3s;
        -moz-transition: all 3s;
        -ms-transition: all 3s;
        -o-transition: all 3s;
        transition: all 3s;
    }


</style>

</head>
<body>

<div id="box">

</div>

<script>

var box = document.querySelector("#box");

box.onclick = function () {

    this.style.width = "900px";

    this.style.height = "500px";
}

</script>

</body>
</html>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容