[英]Keyframe animation won't leave
所以我剛開始學習代碼,所以我想我會從一些簡單的東西開始,包括一堆使用關鍵幀的樣式方面和動畫。 當我的一個動畫開始時,我讓“你好”這個詞淡入視野,然后淡出視野。 但是,當動畫完成后,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>
動畫完成后,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;
}
將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;
}
}
如果要在動畫結束后保持最后一幀的狀態,則需要此選項。
您還可以將 top、left 和 opacity 添加到.h1
類中, @keyframes
中定義的那些現在僅在此元素動畫時使用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.