html5——过渡

transition：1、开始状态 2、终止状态 3、过渡属性

transition: width 2s, background-color 2s;//属性，时间
transition: all 2s linear 1s;//属性，时间，运动曲线，延迟时间

属性详解

/* 如果希望所有的属性都发生过渡 使用过all*/
transition-property: all;
/* 过渡持续时间*/
transition-duration: 4s;
/*运动曲线 linear 线性 ease-in ease-out  ease-in-out :先加速后减速 */
transition-timing-function: ease-in-out;
/* 过渡延迟*/
transition-delay: 1s;
/* 简写*/
transition: width 4s ease-in-out 0s;

泡泡案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            margin: 100px auto;
            width: 300px;
            height: 100px;
            background: url("images/paopao.png") no-repeat left top,
            url("images/paopao.png") no-repeat right bottom blue;
            transition: all 1s;
        }

        div:hover {
            background: url("images/paopao.png") no-repeat left bottom,
            url("images/paopao.png") no-repeat right top blue;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

小米案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }

        .box {
            width: 1000px;
            height: 400px;
            margin: 150px auto;
        }

        .box1 {
            width: 150px;
            height: 200px;
            margin: 0 30px;
            background-color: #fff;
            float: left;
            position: relative;
            overflow: hidden;
        }

        .box2 {
            position: absolute;
            bottom: -80px;
            left: 0;
            width: 100%;
            height: 80px;
            background-color: orange;
            transition: all 1s;
        }

        .box1:hover .box2 {
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box1">
        <div class="box2"></div>
    </div>
</div>
</body>
</html>