CODEWITHSUNDEEP
htmlcsscss-transitions
Majid
Majid

Reputation: 14253

Blinking zoom-in zoom-out image by CSS

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

Upvotes: 2

Views: 1541

Answers (2)

Eddy Vermeer
Eddy Vermeer

Reputation: 31

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;
    }

Upvotes: 1

Maksims Kitajevs
Maksims Kitajevs

Reputation: 225

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. : )

Upvotes: 2

Related Questions