css过渡笔记

3D     http://fangyexu.com/tool-CSS3Inspector.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: #F00;
            /*transition-property: all;
            transition-duration: 4s;
            transition-timing-function: ease;
            transition-delay: 2s;*/
            transition:bacground 4s linear 2s,
                        width 2s ease-in 1s;

            color: #FFF;
        }
        .father:hover .box {
            margin-left: 500px;
        }
        .linear {
            transition-timing-function: linear;
        }
        .ease {
            transition-timing-function: ease;
        }
        .ease-in {
            transition-timing-function: ease-in;
        }
        .ease-out {
            transition-timing-function: ease-out;
        }
        .ease-in-out {
            transition-timing-function: ease-in-out;
        }
        .cubic-bezier {
            transition-timing-function: cubic-bezier(0.9, 1.26, 0.11, -0.9);
        }
    </style>
</head>
<body>
<div class="father">
    <div class="box linear">linear</div>
    <div class="box ease">ease</div>
    <div class="box ease-in">ease-in</div>
    <div class="box ease-out">ease-out</div>
    <div class="box ease-in-out">ease-in-out</div>
    <div class="box cubic-bezier">cubic-bezier</div>
</div>
</body>
</html>

 

posted @ 2017-05-06 14:50  -CLAY-  阅读(263)  评论(0)  编辑  收藏  举报