[CSS]动画animation-fill-mode

文档： https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-fill-mode

animation-fill-mode属性可以接受 none、forwards、backwards、both四个值中的一个值。

none 当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。
forward 目标将保留由执行期间遇到的最后一个关键帧计算值。最后一个关键帧取决于animation-direction和animation-iteration-count的值。
backwards 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。第一个关键帧取决于animation-direction的值。
both 动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

    


常用forward：（动画执行后停在最后一个关键帧）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .move_in {
            animation-duration: 1s;
            animation-fill-mode: forwards;   /* 动画播放一次定格到结尾 */
            animation-name: slidein;
        }

        @keyframes slidein {
            from {
                transform: translate(-500px, 0);
            }

            to {
                transform: translate(0, 0);
            }
        }

        .move_out {
            animation-duration: 1s;
            animation-fill-mode: forwards;   /* 动画播放一次定格到结尾 */
            animation-name: slideout;
        }

        @keyframes slideout {
            from {
                transform: translate(0, 0);
            }

            to {
                transform: translate(-500px, 0);
            }
        }

        #left {
            width: 500px;
            height: 300px;
            background-color: aquamarine;
            position: relative;
            left: 500px;
        }
    </style>
</head>

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<body>
    <div id="left" class="move_in">

    </div>
</body>

<script>
    $('#left').on('click', function () {
        if ($("#left").hasClass("move_out")) {
            return $('#left').removeClass('move_out').addClass('move_in')
        }

        if ($("#left").hasClass("move_in")) {
            return $('#left').removeClass('move_in').addClass('move_out')
        }
    })
</script>

</html>

 

posted @ 2023-12-25 14:27  ximu19  阅读(90)  评论(0)    收藏  举报