CSS3----过渡--整合 

<!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: #BBFFAA;
                text-align: center;
                font: 50px/200px "微软雅黑";
                
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                margin: auto;
                /*transition是一个简写属性，控制动画的速度*/
                /* transition: 2s; */
                /*transition-property 指定应用过渡属性的名称*/
                transition-property: width;
                /*transition-duration 指定过渡动画所需时间
                    可指定多个时长，每个会应用到transition-property指定的对应属性
                    指定时长个数小于属性个数，时长列表会重复，反之时长列表更长，时长列表会被裁剪*/
                transition-duration: 2s;
            }
            body:hover .test{
                width: 100px;
                height: 100px;
                font: 30px/100px "微软雅黑";
            }
        </style>
    </head>
    <body>
        <div class="test">
            啦啦啦
        </div>
    </body>
</html>

transition 是一个简写属性，控制动画的速度

transition-property 指定应用过渡属性的名称

transition-duration 指定过渡动画所需时间

　　可指定多个时长每个会应用到transition-proprety指定的对应属性，指定时长个数小于属性个数，时长列表会重复，反之时间列表更长，时间列表会被裁剪

 

 

 

过度运动形式与过渡延迟

<!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: 400px;
                height: 200px;
                /* border-radius:50% ; */
                background: #BBFFAA;
                text-align: center;
                font: 50px/200px "微软雅黑";
                
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                margin: auto;                
                transition-property: width;            
                transition-duration: 5s;
                /*
                    transition-timing-function 
                    用来指定浏览器的过渡速度，以及过渡期间的操作进展情况
                            cubic-bezier 贝塞尔曲线
                        属性值： ease 默认值 加速然后减速
                                linear 匀速
                                ease-in 加速
                                ease-out 减速
                                ease-in-out 加速然后减速                                
                                step-start 等同于steps（1，start）
                                step-end 等同于steps（1，end）
                                steps(参数1,2) 第一个参数：正整数
                                               第二个参数：发生变化的时间点（默认为end）
                */
               transition-timing-function:steps(5,start);
               /*transition-delay 规定在过渡效果开始作用之前需要等待的时间*/
               transition-delay: 3s;
               
               
               /* 
               
               transition-property: background,width,height;
               transition-duration: 3s,2s;
               transition-delay:3s,2s;
               transition-timing-function:linear;
                
                
               transition-property: background,width,height;
               transition-duration: 3s,2s,3s;
               transition-delay:3s,2s,3s;
               transition-timing-function:linear,ease,ease;
                
                    当属性值的列表长度不一致时
                        超出的情况下是会被全部截掉的
                        不够的时候，关于时间的会重复列表，
                        transition-timing-function的时候使用的是默认值ease
                
                */
               
               
               
               
               
            }
            body:hover .test{
                width: 100px;
                /* font: 30px/100px "微软雅黑"; */
            }
        </style>
    </head>
    <body>
        <div class="test">
            啦啦啦
        </div>
    </body>
</html>

transition-timing-function

　　用来指定浏览器的过渡速度，以及过渡期间的操作进展情况

　　属性值： ease 默认值 加速然后减速

　　　　　　linear 匀速

　　　　　　ease-in 加速

　　　　　　ease-out 减速

　　　　　　ease-in-out 加速然后减速

　　　　　　step-start 等同于steps（1，start）

　　　　　　step-end 等同于steps（1，end）

　　　　　　steps（参数1，参数2）第一个参数：正整数 第二个参数：发生变化的时间点（默认为end）

 

posted @ 2021-07-16 16:41  2237774566  阅读(35)  评论(0)    收藏  举报