CODEWITHSUNDEEP
csscss-animations
user3495224
user3495224

Reputation: 49

replay animation CSS3 every 3 seconds

I made an animation css3 however need to be run every 3 seconds infinite, unable to do only with css.

CSS3

.halo-robford-animate{
    animation: leaves 0.3s ease-in-out 3 alternate;
    -webkit-animation: leaves 0.3s ease-in-out 3 alternate;
}

Codepen

Upvotes: 0

Views: 2296

Answers (2)

user3728283
user3728283

Reputation:

You are missing animation-iteration-count. The formal syntax for animation is:

animation: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>

Source + additional info

You could change it to:

.halo-robford-animate{
    animation: leaves 0.3s ease-in-out 3s infinite alternate;
    -webkit-animation: leaves 0.3s ease-in-out 3s infinite alternate;
     -moz-animation: leaves 0.3s ease-in-out 3s infinite alternate;
    -o-animation: leaves 0.3s ease-in-out 3s infinite alternate;
}

Note the measurement of 3 requires a unit, so added an s to make it 3s. The second time measurement is the animation-delay which specifies the delay in which it will start, not between animations.

Demo

Or use the properties individually:

animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;

If you want a 3 second gap between the animations where the animation takes 0.3s, you'll need to make a slight adjustment. Change the animation-duration to 3s (which is the 0.3s you have)

.halo-robford-animate{
    animation: leaves 3s ease-in-out 3s infinite alternate;
    -webkit-animation: leaves 3s ease-in-out 3s infinite alternate;
     -moz-animation: leaves 3s ease-in-out 3s infinite alternate;
    -o-animation: leaves 3s ease-in-out 3s infinite alternate;
}

And make animation only occur for the first 0.3s:

@-webkit-keyframes leaves {
    0% {
        opacity: 1;
    }

    5% {
      opacity: 0.5;
    }

    10% {
        opacity: 1;
    }
}

Demo 2

Upvotes: 2

Danny van Holten
Danny van Holten

Reputation: 932

Try and add this to your code

.halo-robford-animate{
    animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
}

Upvotes: 0

Related Questions