CSS动画效果_div内嵌css动画-CSDN博客

本文链接：https://blog.csdn.net/2301_78691786/article/details/131251292

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画效果</title>
</head>
<style>
    /* 1.定义动画 */
    /* 定义   动画名称 */
    @keyframes move {

        /* 开始状态 */
        0% {
            transform: translateX(0px);
        }

        /* 结束状态 */
        100% {
            transform: translate(1000px);
        }
    }

    div {
        width: 200px;
        height: 200px;
        background-color: palegoldenrod;
        /* 2.调用动画 */
        /* 动画名称 */
        animation-name: move;
        /* 持续时间 */
        animation-duration: 3s;
    }



    /* 动画序列 */
    @keyframes d_move {
        0% {
            transform: translate(0, 0);
        }

        25% {
            transform: translate(1000px, 0);
        }

        50% {
            transform: translate(1000px, 500px);
        }

        75% {
            transform: translate(0, 500px);
        }

        100% {
            transform: translate(0, 0);
        }
    }

    .d {
        width: 100px;
        height: 100px;
        margin-top: 50px;
        background-color: palegreen;
        animation-name: d_move;
        animation-duration: 6s;
    }



    /* 动画属性 */
    @keyframes i_move {
        0% {
            transform: translate(0, 0);
        }

        100% {
            transform: translate(1000px, 0);
        }
    }

    .i {
        width: 100px;
        height: 100px;
        margin-top: 50px;
        background-color: paleturquoise;
        animation-name: i_move;
        animation-duration: 2s;
        /* 运动曲线 */
        animation-timing-function: ease;
        /* 何时开始 */
        animation-delay: 1s;
        /* 重复次数 */
        animation-iteration-count: infinite;
        /* 逆向播放 */
        animation-direction: alternate;
        /* 设置结束位置 */
        /* animation-fill-mode: forwards; */

    }

    .i:hover {
        /* 鼠标经过div 让div停止动画，鼠标离开继续动画 */
        animation-play-state: paused;
    }



    /* 动画简写 */
    @keyframes v_move {
        0% {
            transform: translate(0, 0);
        }

        100% {
            transform: translate(1000px, 0);
        }
    }

    .v {
        width: 100px;
        height: 100px;
        margin-top: 50px;
        background-color: palevioletred;
        animation: v_move 2s linear 0s 1 alternate forwards;
    }
</style>

<body>
    <div></div>


    <!-- 动画序列 -->
    <div class="d"></div>



    <!-- 动画属性 -->
    <div class="i"></div>



    <!-- 动画简写 -->
    <div class="v"></div>
</body>

</html>