Question

所以我刚开始学习代码，因此我认为我将从简单的事情开始，并包括使用关键帧的大量样式方面和动画。当我的一个动画开始播放时，我会先看到单词“ hello”，然后消失。不过，完成动画后，“ hello”一词不会完全消失，它会弹出到屏幕的左上角，并且不会消失。只是好奇是否有人知道如何摆脱。就像我说的，我刚刚开始学习，因此任何简单的步骤都将不胜感激。我输入了我当前拥有的代码。

谢谢。

<!DOCTYPE html>
<style>
    .star1{
        border-radius:50%;
        width:25px;
        height:25px;
        position:fixed;
        animation-name: flash;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        background:white;
        animation-timing-function:linear;
    }
    .star2{
        border-radius:50%;
        width:15px;
        height:15px;
        position:fixed;
        animation-name: twinkle;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        background:white;
        animation-timing-function:linear;
 }
    .star3{
        border-radius:50%;
        width:25px;
        height:25px;
        position:fixed;
        animation-name: bright;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        background:white;
        animation-timing-function:linear;
    }
    .star4{
        border-radius:50%;
        width:10px;
        height:10px;
        position:fixed;
        animation-name: blink;
        animation-duration:2s;
        animation-iteration-count: infinite;
        background:white;
        animation-timing-function:ease-out;
    }

    .moon{
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 25px 10px 0px 0px white;
    left:350px;
    bottom:300px;
  }

  @keyframes flash{
    0%{
        top:50px; left:100px; opacity:0.5;
    }
    50%{
       top:50px; left:100px; transform:scale(0.5);opacity:.25;
    }
    100%{
        top:50px; left:100px; opacity:0.5;
    }
  }

  @keyframes twinkle{
       0%{
        top:250px; left:300px; opacity:0.5;
    }
    20%{
       top:250px; left:300px; transform:scale(0.5);opacity:.25;
    }
    100%{
        top:250px; left:300px; opacity:0.5;
    }
  }

 @keyframes bright{
       0%{
        top:100px; left:0px; opacity:0.5;
    }
    50%{
       top:125px; left:700px; transform:scale(0.5);opacity:.25;
    }
    100%{
        top:120px; left:700px; transform(0.1); opacity:0;
    }
  }

  @keyframes blink{
       0%{
        top:100px; left:450px; opacity:0.25;
    }
    50%{
       top:100px; left:450px; transform:scale(0.5);opacity:.15;
    }
    100%{
        top:100px; left:450px; opacity:0.25;
    }
}
 .h1{

     font-family:monotype;
     Font-size:120px;
     color:black;
     position:absolute;
     animation-name:words;
     animation-duration:5s;
     animation-iteration-count:1;

 }


 @keyframes words{
     0%{
         top:400px; left:300px; opacity:0;
     }
     50%{
         top:400px; left:300px; opacity:1;
     }
     100%{
         top:400px; left:300px; opacity:0; display:none;
     }
 }
  #back {
    position: fixed;
    width: 100%;
    height: 100%;
    background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);

</style>

<div id="back"></div>
<div class="moon"></div>
<div class="star1"></div>
<div class="star2"></div>
<div class="star3"></div>
<div class="star4"></div>
<div class="h1">Hello</div>

Answer 1

动画完成后，div仅具有您在其上定义的属性，因此只需将opacity:0;添加到.h1。

   .h1 {
         font-family:monotype;
         Font-size:120px;
         color:black;
         position:absolute;
         animation-name:words;
         animation-duration:5s;
         animation-iteration-count:1;
         opacity:0;
     }

Answer 2

将animation-fill-mode属性添加到您的.h1类中。

 .h1{

     font-family:monotype;
     Font-size:120px;
     color:black;
     position:absolute;
     animation-name:words;
     animation-duration:5s;
     animation-iteration-count:1;
     animation-fill-mode: forwards;
 }
 @keyframes words{
     0%{
         top:400px; left:300px; opacity:0;
     }
     50%{
         top:400px; left:300px; opacity:1;
     }
     100%{
         top:400px; left:300px; opacity:0; display:none;
     }
 }

如果要在动画结束后保留最后一帧的状态，则是必需的。

您还可以在.h1类中为@keyframes类添加顶部，左侧和不透明度，现在仅在激活该元素时才使用它们。

关键帧动画不会消失

2 个答案: