transition-property 过度属性 all[attr]
    transition-dunration 过度时间
    transition-delay 延迟时间
    transition-timing-function 运动类型

    • ease:(逐渐变慢)默认值
    • linear:(匀速)
    • ease-in:(加速)
    • ease-out:(减速)
    • ease-in-out:(先加速后减速)
    • cubic-bezier 贝塞尔曲线(x1,y1,x2,y2) 
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8.     <!--[if It IE 9]><script src="html5.min.js"></script><![endif]-->
    9.     <style>
    10.     #div{
    11.         width: 100px;
    12.         height:100px;
    13.         background: red;
    14.         transition:width 1s 1s;
    15.         /* 延迟的一秒 */
    16.     }
    17.     #div:hover{
    18.         width: 300px;
    19.         transition:width 1s 1s; 
    20.         /* 延迟的一秒 */
    21.     }
    22.     </style>
    23. </head>
    24. <body>
    25.     <div id="div"></div>
    26. </body>
    27. </html>

    项目案例

    image.png

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--[if It IE 9]><script src="html5.min.js"></script><![endif]-->
    <style>
        /* 过渡动画效果思考的步骤
            1.找到过渡属性
            2.找到过渡属性起始值和结束值
            3.在合适的位置上增加transition属性

            过渡属性 box-shadow
            起始值 30px transparent
            结束值 0   white
        */
        body{
            background:#2192bc;
        }
        .box{
            width: 100px;
            height: 100px;
            background: #2c9dc4 url("./1991841492744344.jpg") no-repeat center center;
            border-radius: 50%;
            margin: 100px auto;
            box-shadow: 0 0 0 30px transparent;
            -o-transition: box-shadow 1s;
            -ms-transition: box-shadow 1s;
            -moz-transition: box-shadow 1s;
            -webkit-transition: box-shadow 1s;
            transition: box-shadow 1s;
        }
        .box:hover{
            box-shadow: 0 0 0 0 rgba(255,255,255,0.5);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>