leichte Probleme mit CSS

-1

Hallo, ich habe ein paar Probleme mit meinem Code, weil Animation wird nicht hier arbeiten, um meinen Code:leichte Probleme mit CSS

background-image:url(industry2.jpg); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    border:1px solid red; 
    -webkit-animation: fadein 2s ease-in ; 
    -moz-animation: fadein 2s ease-in ; 
    animation: fadein 2s ease-in ; 
    width:500px; 
    height:200px; 
    background-repeat: no-repeat; 
    background-position: left top; 
    padding-top:68px; 
    position:absolute; 
    top:2700px; 
    left:1300px; 

@keyframes fadein { 
from { opacity: 0; } 
to { opacity: 1; }

Sie ich sehe nicht, Animation zum Laufen bringen und ich weiß nicht, was zu tun ist ...

Quelle

2017-12-05 Loo

Bitte posten, was nicht funktioniert. Zeigen Sie uns, was für eine Animation Sie bekommen und was Sie erwartet – Rinav

Standardmäßig wird die Animation nur einmal abgespielt ('animation-iteration-count' ist' 1'). Da Ihr Element "top: 2700px" hat, endet die Animation wahrscheinlich in dem Moment, in dem Sie die Seite zu diesem Element scrollen. –

Sie hatten die @keyframes nicht geschlossen. Ich habe die linke und obere Position für Sichtbarkeitszwecke entfernt.

.container { 
 
    background-image: url("http://via.placeholder.com/500x200"); 
 
    background-size: cover; 
 
    border: 1px solid red; 
 
    animation: fadein 2s ease-in; 
 
    width: 500px; 
 
    height: 200px; 
 
    background-repeat: no-repeat; 
 
    background-position: left top; 
 
    padding-top: 68px; 
 
    position: absolute; 
 
} 
 

 
@keyframes fadein { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
}

<div class="container">Hello</div>

Quelle

2017-12-05 09:14:06 Gerard

"Sie hatten die @keyframes nicht geschlossen" - Sie haben. Die Frage wurde nur schlecht formatiert, so dass das '}' in der Zeile ** unter ** der Code-Block-Formatierung erscheint. – Quentin

leichte Probleme mit CSS

Antwort

Verwandte Themen