CSS3 Animation Zurücksetzen

Question

Ich habe gerade über CSS3 Animationen gelernt, und ich habe diesen Effekt ausgeblendet, aber sobald die Animation beendet ist, kehrt sie an ihren ursprünglichen Platz zurück. Wie kann ich dafür sorgen, dass sie dort bleibt?

auch die Animation scheint ein wenig rau ist es eine bessere Art, dies zu schreiben, so dass es glatter erscheint?

.logo { 
width: 100%; 
height: 100%; 
position: relative; 
animation-name: down; 
animation-duration: 3s; 
} 

@keyframes down { 
0% {top: 0px; opacity: 0;} 
30% {top: 50px;} 
100% {opacity: 1;} 
} 

Answer 1

Um ein Element am completion of animation, so dass für stoppen Sie, wie unten schließen animation-fill-mode haben,

So animation-fill-mode:forwards mit ihm die Position der Elemente stoppen, sobald last frame ausgeführt wird. Es gibt auch andere Eigenschaften wie forwards, backwards, both und solche mehr.

Aber in Ihrem animation Sie nicht das Ende animation dh bei 100% erklären, wo zu stoppen, so geht es zurück zu 0px,

prüfen beiden folgenden Beispiele,

Beispiel - 1

.logo { 
 
width: 100px; 
 
height: 100px; 
 
position: relative; 
 
animation-name: down; 
 
animation-duration: 3s; 
 
animation-fill-mode:forwards; 
 
background:#ccc; 
 
top:0px; 
 
} 
 

 
@keyframes down { 
 
    0%{ 
 
    opacity:0; 
 
    } 
 
    30%{ 
 
    top:30px; 
 
    } 
 
    100%{ 
 
    top:30px; 
 
    opacity:1; 
 
    } 
 
}

<div class="logo"> 
 

 
</div>

Beispiel - 2

.logo { 
 
width: 100px; 
 
height: 100px; 
 
position: relative; 
 
animation-name: down; 
 
animation-duration: 3s; 
 
animation-fill-mode:forwards; 
 
background:#ccc; 
 
top:0px; 
 
} 
 

 
@keyframes down { 
 
    from{ 
 
    opacity:0; 
 
    } 
 
    to{ 
 
    top:30px; 
 
    opacity:1; 
 
    } 
 
}

<div class="logo"> 
 

 
</div>

Answer 2

Sie müssen animation-fill-mode: forwards hinzufügen, die verhindern, dass Ihre Animation zurückgesetzt wird.

.logo { 
    /* other properties */ 
    animation-fill-mode: forwards; 
}