Endless animation is created with CSS keyframes
I have a sample:
HTML CODE:
<img src="https://i1.wp.com/img.celmaitare.net/wp-content/uploads/2014/12/Poze-Peisaje-179.jpg" class="img">
CODE CSS:
@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;
}
I want to repeat this animation after 2 seconds, but she doesn't understand why it doesn't work.
Could you tell me what is wrong? Is this a syntax error?
Thank!
+3
source to share
1 answer
You have a typo. The animation is called .fade-img
not .fade-bg
. See code snippet below. A little something else: you can add animation-direction: alternate;
to make the image look smooth and fluid.
@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">
`
+3
source to share