从页面加载自动开始停止关键帧动画 [英] Stop Keyframe animation from automatic start on page load

问题描述

我有一些css和Keyframe动画，可用来运行几个Div元素.我只希望在单击按钮时才能开始启动CSS和关键帧动画.我的问题是，它们自己开始，然后动画延迟用完，使按钮无用.

I've got some css and Keyframe animations that I use to run a couple of Div elements. I want the css and keyframe animations only to start when i click my buttom. My problem is, they start on there own and then the animation-delay has run out and renders the button useless.

这是我正在尝试的代码.

Here is the code I'm trying.

$(document).ready(function(){
    $("#bt1").click(function(){
        $(".animation-box").addClass("first-text", "second-text", "third-text", "fourth-text", "fifth-text");
    });


    $('.animation-box').on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
         $(this).removeClass("first-text", "second-text", "third-text", "fourth-text", "fifth-text");
    });
});

            @keyframes topFadeOut {
            0% {
                position: absolute;
                top: 10%;
                opacity: 0;
            }

            75% {
                position: absolute;
                top: 50%;
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
            }

            @keyframes bottomFadeOut {
            0% {
                position: absolute;

                opacity: 0;
            }

            75% {
                position: absolute;

                opacity: 1;
            }

            100% {
                opacity: 0;
            }

            }

            @keyframes topFadeOutVertical {
            0% {
                position: absolute;
                top: 60%;
                opacity: 0;

            }

            75% {
                position: absolute;
                top: 65%;
                opacity: 1;

            }

            100% {
                opacity: 0;

            }
            }

            @keyframes rightFadeInOut {
            0% {
                position: absolute;
                right: -3rem;
                opacity: 0;

            }

            75% {
                position: absolute;
                right: 40%;
                opacity: 1;

            }

            100% {
                opacity: 0;
                right: 10rem;

            }
            }

            @keyframes fadeInOut {
            0% {
                opacity: 0;

            }

            45% {
                opacity: 1;

            }

            100% {
                opacity: 0%;

            }
            }

            .first-text {
            font-size: 4.4rem;
            position: absolute;
            left: 23%;
            top: 70%;
            opacity: 0;
            animation-name: topFadeOut;
            animation-duration: 5s;
            color: black;
            animation-play-state: i;
            }

            .second-text {
            font-size: 4.4rem;
            position: absolute;
            top: 50%;
            opacity: 0;
            animation-name: rightFadeInOut;
            animation-delay: 4s;
            animation-duration: 6s;
            color: black;
            animation-play-state: inherit;
            }

            .third-text {

            font-size: 4.4rem;
            position: absolute;
            left: 27%;
            top: 50%;
            opacity: 0;
            animation-name: topFadeOutVertical;
            animation-delay: 8s;
            animation-duration: 6s;
            color: black;
            white-space: nowrap;
            animation-play-state: inherit;
            }

            .fourth-text {
            font-size: 4.4rem;
            position: absolute;
            top: 55%;
            left: 27%;
            opacity: 0;
            color: black;
            animation-name: fadeInOut;
            animation-delay: 12s;
            animation-duration: 7s;
            animation-play-state: inherit;
            }

            .fifth-text {
            font-size: 5rem;
            position: absolute;
            left: 30%;
            top: 50%;
            opacity: 0;
            color: black;
            animation-name: bottomFadeOut;
            animation-delay: 16s;
            animation-duration: 9s;
            animation-play-state: inherit;
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="bt1" class="button button5">< R30K</button>
<button id="bt2" class="button button5">R30K - R70K</button>
<button id="bt3" class="button button5">> R70K</button>

<section class="animation-box">
    <div class="first-text">Starting winner selection process</div>
    <div class="second-text">Identifying eligible entries</div>
    <div class="third-text">Uploading eligible entries</div>
    <div class="fourth-text">Shuffling eligible entries</div>
    <div class="fifth-text">And the winner is...</div>
</section>

因此，在运行该动画时，关键帧动画会在页面加载时开始，导致我无法使用按钮功能.

So when running that, the Keyframe animation starts on page load, causing me not to be able to use the button function.

我想要知道的是如何在页面加载时停止关键帧的启动，并且仅在单击按钮时才运行关键帧.

What I want is to know how to stop keyframe from starting when page loads and to run the keyframe ONLY when button is clicked.

非常感谢您的帮助.

推荐答案

使用animation-play-state属性将动画设置为最初暂停

Use the animation-play-state property to set the animation to paused initially

https://developer.mozilla.org /en-US/docs/Web/CSS/animation-play-state

这篇关于从页面加载自动开始停止关键帧动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！