如何在最后一帧结束所有动画？

Question

我一直在努力让这个按钮同时启动我的所有动画。经过大量的尝试和错误，我成功地让它发挥作用。然而，当我观察它的表现时，我的元素没有对齐，并且当我添加“animation-fill-mode:forwards”时动画并没有停止。

奋斗：

将图像和加载文本对齐，并将图像放置在加载文本上方。
使按钮 onclick 触发图像并加载文本，启动所有动画，直到到达章节选择。
解决章节文本烦人的闪烁问题。
确保一切都停止在最后一帧，而不是停止在第一帧。

随时帮助地球上最糟糕的程序员。 <3

对齐：我尝试了各种方法，包括创建 div、使用显示 Flex 和网格、使用绝对位置以及所有可以想象到的技术。然而，每当我设法让一部分工作时，代码的其他部分似乎就会变得更糟。

动画：尽管尝试了几乎所有我能在网上找到的方法，并联系了老师和聊天机器人，但似乎没有人能找到解决方案。我尝试了“animation-fill-mode:forwards”，但没有产生预期的结果。不幸的是，这几乎是我对此事的了解，我的大脑非常小。

章节文本：我尝试解决章节文本淡入时的闪烁问题。令人惊讶的是，将文本缩短为“Chap”而不是“Chapter”似乎解决了问题，请先尝试。然而，刷新页面后，闪烁又回来了，GRRRR。

开始按钮：我没有像其他问题那样给予这个问题那么多的爱。我尝试使用 z-index 为 -5 的纯黑色图像和设置“0% = z-index: -5”、“99% = z-index: -5”和“100% = z-index”的动画-指数：3。”这个办法失败了，我决定“去拿牛奶”。

https://www.youtube.com/watch?v=7kBien8OL0w <--- Menu music

快乐色情 <---

* {
    text-align: center
}
a {
    text-decoration: none;
    color: white;
    font-size: 200%;
    font-family: cursive;
    text-align: center;
    z-index: 1;
}

a:hover {
    color: gray;
}

div.middle {
    position: absolute;
    display: grid;
    margin: auto;
    animation-fill-mode:forwards;
    animation: fadein 10s;
    z-index: 2;
}


body {
    background-color: rgb(0, 0, 0);
    overflow: hidden;
    position: relative;
}

h1 {
    color: darkred;
}

h2.fadeout {
    color: white;
    z-index: 1;
    animation-fill-mode: forwards;
    margin: 10% auto;
    position: relative;
}
/* 
div {
    display: flex;
    justify-content: center;
    align-items: center;
} */


div.divbox {
    margin: auto;
    width: 70%;
    aspect-ratio: 16/9;
    display: flex;
    border: 5px solid white;
    justify-content: center;
    align-items: center;
    z-index: 1;
    position: relative;
    height: 70vh;
}

div.load {
    animation-fill-mode: forwards;
    position: relative;
    margin-top: 20%;
}


div.divboxx {
    display: grid;
    justify-content: center;
    align-items: center;
    animation-fill-mode: forwards;
    margin-top: -20%;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
}

#erotic {
    width: 80%;
    aspect-ratio: 1/1;
    display: grid;
    justify-content: center;
    align-items: center;
    animation-fill-mode: forwards;
}

img {
    aspect-ratio: 1/1;
    width: 100%;
}

.helix {
    z-index: 1;
    margin: auto;
}


@keyframes spinner {
    0% {transform: rotateY(0deg); opacity: 100%;}
    50% {transform: rotateY(-900deg); opacity: 100%;}
    75% {transform: rotateY(-1350deg); opacity: 0%;}
    100% {transform: rotateY(-1800deg); opacity: 0%;}
}



@keyframes fadeout {
    0% {opacity: 100%; left: auto; right: auto;}
    50% {opacity: 100%; left: auto; right: auto;}
    75% {opacity: 0%; left: auto; right: auto;}
    100% {opacity: 0%; left: 100%; right: auto;}
}

@keyframes fadein {
    0% {opacity: 0%; left: 50%; right: 50%;}
    75% {opacity: 0%; left: 50%; right: 50%;}
    100% {opacity: 100%; left: 50%; right: 50%;}
}

button {
    margin: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<audio id="sound1" src="menymusic.mp3" preload="auto"></audio>
<button onclick="document.getElementById('sound1').play(); ani();">Play</button>
  
    <div class="divbox">
        
        <div class="divboxx">
            <img id="erotic" src="Happyerotisk.png" class="helix">    
        </div>
        <div class="load">
            <h2  id="loading" class="fadeout">Loading</h2>
        </div>
       
        <div id="chapter" class="middle">
                <a href="../Kapitel1/Index.html">Chapter 1</a>
                <a href="../Kapitel2/Index.html">Chapter 2</a>
                <a href="../Kapitel3/Index.html">Chapter 3</a>
        </div>  
    </div>
<script>
        function ani() {
    //Get All
    var erotic = document.getElementById("erotic");
    var loading = document.getElementById("loading");
    var chapter = document.getElementById("chapter");

    //Start animation
    triggerAnimation(erotic, 'spinner 10s linear');
    triggerAnimation(loading, 'fadeout 10s linear');
    triggerAnimation(chapter, 'fadein 10s linear');
    }

    function triggerAnimation(element, animation) {
    element.style.animation = 'none';
    element.offsetHeight;
    element.style.animation = animation;
    }
</script>
</body>
</html>

如何在最后一帧结束所有动画？

问题描述投票：0回答：0

最新问题

如何在最后一帧结束所有动画？

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0