CSS3过渡属性问题

Question

这篇问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

CSS3过渡属性问题

发布于
2017-08-18

过渡属性和padding配合使用会出现这种问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
   <style>
        .box{
            height: 300px;
            width: 500px;
        }
        .left{
            position: relative;
            float: left;
            width: 50%;
            height: 300px;
        }
        .right{
            float: left;
            width: 50%;
            height: 300px;
        }
        .top{
            position: relative;
            height: 150px;
        }
        .bottom{
            position: relative;
            height:150px;
        }
        .img{
            position: absolute;
            width: 100%;
            bottom: 0;
            height: 20px;
            -webkit-transition: all 1s;
            -moz-transition: all 1s;
            -ms-transition: all 1s;
            -o-transition: all 1s;
            transition: all 1s;
            background-color: skyblue;
        }
        .img:hover{
            height: 100%;
            padding-top: 50%;
        }
    </style>
</head>
<body>
<div class="box clearfix">
    <div class="left">
        <div class="img">
            aaa
        </div>
    </div>
    <div class="right">
        <div class="top">
            <div class="img">
                aaa
            </div>
        </div>
        <div class="bottom">
            <div class="img">
                aaa
            </div>
        </div>
    </div>
</div>

</body>
</html>

图片描述