Blinking zoom-in zoom-out image by CSS

Question

I use this code to create a blinking zoom-in and zoom-out image, but it only zoom-in and after that, it reset image and again zoom-in.

@keyframes blink {
       0% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
       100% {
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
        }
    }
    img {
        transition: .3s ease-in;
        animation: blink 1s;
        animation-iteration-count: infinite;
    }

JSFiddle

Answer 1

Easy solution would be:

    @keyframes blink {
       0% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
       50% {
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
        }
        100% {
          -webkit-transform: scale(1);
          transform: scale(1);
        }
    }
    img {
        transition: .3s ease-in;
        animation: blink 1s;
        animation-iteration-count: infinite;
    }

So you just need in the end of animation make image same position as it is at start. : )

Answer 2

You have to animate it to the start point again. Like this:

@keyframes blink {
       0% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
       50% {
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
        }
        100% {
          -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    img {
        transition: .3s ease-in;
        animation: blink 1s;
        animation-iteration-count: infinite;
    }