Infinite animation create with keyframes CSS

I have a sample:

link

CODE HTML:

<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 it does not understand why it does not work.

Can you please tell me what is wrong? Is it a syntax mistake?

Thank you!