过渡案例（钟表）动画案例_过度动画案例-优快云博客

本文链接：https://blog.youkuaiyun.com/red_HTML/article/details/125911384

transition all属性时间

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .div1 {
            width: 200px;
            height: 200px;
            background: gainsboro;
            border-radius: 50%;
            transition: all 3s;
            /* 贝塞尔曲线函数 */
            transition-timing-function: steps(30, start);
        }
        
        .div1:hover {
            height: 300px;
            background: orange;
        }
    </style>
</head>

<body>
    <div class="div1">

    </div>
</body>

</html>

钟表案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .div1 {
            width: 284px;
            height: 284px;
            background: url(img/22.jpg);
            border-radius: 50%;
            position: relative;
        }
        /* 钟表的中心点 */
        
        .div1::before {
            content: "";
            width: 15px;
            height: 15px;
            background: black;
            border-radius: 50%;
            /* 居中 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        /* 钟表的指针 */
        
        .div1::after {
            content: "";
            width: 2px;
            height: 25%;
            background: black;
            position: absolute;
            top: 24%;
            left: 50%;
            /* 过度所有全部的属性 */
            transition: all;
            transform: translateX(-50%);
            transform-origin: bottom;
            /* 过度的时间 60s */
            transition-duration: 60s;
            /*steps 步进60次*/
            transition-timing-function: steps(60);
            /* 平滑 */
            /* transition-timing-function: ease; */
        }
        
        .div1:hover::after {
            transform: translateX(-50%) rotate(360deg);
        }
    </style>
</head>

<body>
    <div class="div1">

    </div>
</body>

</html>

动画

应用动画：

引用动画 animation-name: 名字

动画的时间：animation-duration: 2s

停在动画的最后

@keyframes identifier{

from {

从哪里来

}（可省略）

to{
到哪里去

}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .div1 {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: red;
            /* 使用动画 */
            animation-name: animation;
            /* 动画持续的时间 */
            animation-duration: 5s;
            /* 动画填充模式 forwoards 将动画的样式停留在最后一个     */
            animation-fill-mode: forwards;
            /* 动画延迟的时间 时间为负数时 表示动画已经执行了多少 */
            /* animation-delay: 2s; */
        }
        /* 定义动画 */
        
        @keyframes animation {
            25% {
                background: yellow;
            }
            50% {
                background: green;
            }
            75% {
                background: blue;
            }
            100% {
                background: orange;
            }
        }
    </style>
</head>

<body>
    <div class="div1">

    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .div1 {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: red;
            /* 使用动画 */
            animation-name: animation;
            /* 动画持续的时间 */
            animation-duration: 5s;
            /* 动画返回 */
            animation-direction: alternate;
            /* 动画重复 */
            animation-iteration-count: infinite;
        }
        /* 定义动画 */
        
        @keyframes animation {
            from {
                margin-left: 0px;
            }
            to {
                margin-left: 500px;
            }
        }
    </style>
</head>

<body>
    <div class="div1">

    </div>
</body>

</html>