Infinite Animation mit Keyframes CSS erstellen

Question

Ich habe eine Probe:

link

CODE HTML:

<img src="https://i1.wp.com/img.celmaitare.net/wp-content/uploads/2014/12/Poze-Peisaje-179.jpg" class="img"> 

CSS CODE:

@keyframes fade-img { 
    0%{ 
     opacity: 0; 
    } 
    100%{ 
     opacity: 0.5; 
     filter: alpha(opacity=50); 
     -moz-transition: all 0.9s ease; 
     -webkit-transition: all 0.9s ease; 
    } 
} 

.img{ 
    animation-name: fade-bg; 
    animation-iteration-count: infinite; 
    animation-duration: 2s; 
} 

Ich möchte wiederholen bei dieser Animation nach 2 Sekunden aber es versteht nicht, warum es nicht funktioniert.

Können Sie mir bitte sagen, was los ist? Ist es ein Syntaxfehler?

Vielen Dank!

Answer 1

Sie haben einen Tippfehler. Die Animation heißt .fade-img nicht .fade-bg. Sehen Sie sich das Codefragment unten an. Ein kleines Extra: Sie können animation-direction: alternate; hinzufügen, um das Bild sanft ein- und auszublenden.

@keyframes fade-img { 
 
    0%{ 
 
    opacity: 0; 
 
    } 
 
    100%{ 
 
    opacity: 0.5; 
 
    filter: alpha(opacity=50); 
 
    } 
 
} 
 

 
.img{ 
 
    max-width: 100%; 
 
    animation-name: fade-img; 
 
    animation-iteration-count: infinite; 
 
    animation-duration: 2s; 
 
    -webkit-transition: all 0.9s ease; 
 
    -moz-transition: all 0.9s ease; 
 
     -o-transition: all 0.9s ease; 
 
      transition: all 0.9s ease; 
 
    animation-direction: alternate; 
 
}

<img src="https://i1.wp.com/img.celmaitare.net/wp-content/uploads/2014/12/Poze-Peisaje-179.jpg" class="img">

`