css3动画效果transition

每当对元素的hover设置了过渡，但没对该元素设置transition的时候，鼠标移上去的过渡是瞬间产生的，若设置了transition后，就会根据你设置的时间而缓慢运动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 500px;
                height: 400px;
                background: #f00;
                margin: 100px;
            }
            .box1{
                width: 200px;
                height: 100px;
                background: skyblue;
                transition: 1s;
            }
            .box:hover .box1{
                transform: translate(100px,50px);/*位移*/
                transform: translate(100px);
                
                /*单一方向的位移*/
                transform: translateX(10px);/*水平位移*/
                transform: translateY(100px);/*垂直位移*/
            }
            
        </style>
    </head>
    <body>
                <div class="box">
            <div class="box1"></div>
        </div>
    </body>
</html>

 

posted @ 2020-03-31 20:28  爱睡觉的小朋友  阅读(149)  评论(0)    收藏  举报