I have scale animation on image, but when the animation finish and go back to the initial size there is no animation, how can i force animation when go back to the initial value?

,css,output

@keyframes scaleImg {
    from {
        transform: scale(0.8);
    }
    to {
        transform: scale(1);
    }
}

img { 
   transform: scale(0.8);
   animation: scaleImg 1.5s;
   animation-direction: alternate;
}



<img src="/" alt="">

I have scale animation on image, but when the animation finish and go back to the initial size there is no animation, how can i force animation when go back to the initial value?

http://jsbin./tijapahuwi/edit?html,css,output

@keyframes scaleImg {
    from {
        transform: scale(0.8);
    }
    to {
        transform: scale(1);
    }
}

img { 
   transform: scale(0.8);
   animation: scaleImg 1.5s;
   animation-direction: alternate;
}



<img src="http://lorempixel./400/200/sports/" alt="">

• javascript
• jquery
• html
• css
• animation

• 1 animation-iteration-count: 2; – Jaromanda X Commented Nov 26, 2015 at 8:20

3 Answers 3

animation-direction: alternate; is a good start

each iteration runs in alternate direction

so, 2 iterations to get back where you started - i.e.

animation-iteration-count: 2;

Of course, if you want the total time to be 1.5s, you'll want to change the 1.5s to 750ms as well

How is it with?:

@keyframes scaleImg {
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.8);
    }
}

img { 
   transform: scale(0.8);
   animation: scaleImg 1.5s;
   animation-timing-function: linear;
}

try this solution

@keyframes scaleImg {
    0% {
    transform: scale(0.8);
}
50% {
    transform: scale(1);
}
100% {
    transform: scale(0.8);
}

img { 
   transform: scale(0.8);
   animation: scaleImg 1.5s;
   animation-direction: alternate;
}

Hope this help you.