css3过渡transition@2018-08-05

最新推荐文章于 2022-10-24 11:33:23 发布

qq_34983808

最新推荐文章于 2022-10-24 11:33:23 发布

阅读量208

点赞数

本文链接：https://blog.csdn.net/qq_34983808/article/details/81429898

版权

本文深入探讨了CSS3的过渡属性，包括测试一至测试七的内容，详细解析了过渡的简写属性，并介绍了过渡完成事件，特别是如何在过渡完成后执行自定义处理。参考了多个权威资料，为开发者提供了全面的理解和实践指导。

摘要由CSDN通过智能技术生成

1、过渡属性

值	描述
transition-property	指定过渡动画的属性（并不是所有的属性都可以动画）
transition-duration	指定过渡动画的时间（0也要带单位）
transition-timing-function	指定过渡动画的形式（贝塞尔）
transition-delay	指定过渡动画的延迟

测试一：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            html{
                height: 100%;
            }
            body{
                width: 60%;
                height: 60%;
                border: 1px solid;
                margin: 100px auto 0;
            }

            #test{
                width: 200px;
                height: 200px;
                border-radius:50% ;
                background: pink;
                text-align: center;
                font: 30px/100px "微软雅黑";

                /*display: block;*/

                /*已知宽高，盒子居中方案*/
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                margin: auto;

                /*transition-property过渡属性，可以指明多个，其中一个属性发生变化，产生过渡*/
                /*transition-duration值的时间单位s，必须写上,不然会失效;*/
                transition-property: background,width,height;
                transition-duration: 1s,0s,1s;
            }

            body:hover #test{
                width: 100px;
                height: 100px;
                background:black;

                /*支持过渡属性列表：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties*/
                /*display: none;*/
            }

        </style>
    </head>
    <body>
        <div id="test">
        </div>
    </body>
</html>

测试二：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            html{
                height: 100%;
            }
            body{
                width: 60%;
                height: 60%;
                border: 1px solid;
                margin: 100