css过渡笔记

最新推荐文章于 2024-07-22 19:24:41 发布

会做饭的技术男

最新推荐文章于 2024-07-22 19:24:41 发布

阅读量193

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h2jbj2iajbaa.html

版权

前端专栏收录该内容

2507 篇文章 12 订阅

订阅专栏

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>