Trigger the animation to run at regular intervals with an initial delay before starting and running on every iteration

Question

Trigger the animation to run at regular intervals with an initial delay before starting and running on every iteration

I am trying to make an HTML button spin in a specific pattern. The button should start spinning after 5 seconds, then rotate for 2 seconds, stop for 5 seconds, and repeat this pattern indefinitely. I have searched for solutions but haven't found one that fits my requirements. Here is the code I currently have, with a rotation speed of 400ms:

 #register_event{
   animation: wiggle 400ms infinite;
 }

 @keyframes wiggle{
   0%{
     transform: rotateZ(0);
   }

   50%{
     transform: rotateZ(-10deg);
   }

   100%{
     transform: rotateZ(10deg);
  }

css css-animations

Answer 1

Answer №1

If you want to keep an animation running continuously in CSS, you can use the 'Infinite' keyword. To achieve this effect in your code, simply modify it as follows:

#register_event{
   animation: wiggle 400ms 3s infinite ease-out none;
 }

@keyframes wiggle{
   0%{
     transform: rotateZ(0);
   }

   50%{
     transform: rotateZ(-10deg);
   }

   100%{
     transform: rotateZ(10deg);
  }
 }

To ensure compatibility with various browsers, make sure to test different placements of the 'infinite' keyword within the shorthand property 'animation'. This should guarantee a flawless functioning of the animation.

Answer 2

If you want to keep an animation running continuously in CSS, you can use the 'Infinite' keyword. To achieve this effect in your code, simply modify it as follows:

#register_event{
   animation: wiggle 400ms 3s infinite ease-out none;
 }

@keyframes wiggle{
   0%{
     transform: rotateZ(0);
   }

   50%{
     transform: rotateZ(-10deg);
   }

   100%{
     transform: rotateZ(10deg);
  }
 }

To ensure compatibility with various browsers, make sure to test different placements of the 'infinite' keyword within the shorthand property 'animation'. This should guarantee a flawless functioning of the animation.

Answer 3

Answer №2

To create a delay between two runs, add a keyframe that does nothing (like the 60% one in my example). This way, the following 40% won't have any changes compared to the initial 0%.

@keyframes wiggle{
    0%{
        transform: rotateZ(0);
    }
    
    25%{
        transform: rotateZ(-10deg);
    }
    
    50%{
        transform: rotateZ(10deg);
    }
    60%{
        transform: rotateZ(0deg);
    }
}


#register_event{
    animation: wiggle 2s infinite;
    animation-delay: 2s;
}

Use the animation-delay property for the initial delay and set it to run infinitely. Adjust the keyframe percentages and overall duration of the animation to get the desired timing. It just requires a bit of math, but I'm confident you can understand the technique!

Answer 4

To create a delay between two runs, add a keyframe that does nothing (like the 60% one in my example). This way, the following 40% won't have any changes compared to the initial 0%.

@keyframes wiggle{
    0%{
        transform: rotateZ(0);
    }
    
    25%{
        transform: rotateZ(-10deg);
    }
    
    50%{
        transform: rotateZ(10deg);
    }
    60%{
        transform: rotateZ(0deg);
    }
}


#register_event{
    animation: wiggle 2s infinite;
    animation-delay: 2s;
}

Use the animation-delay property for the initial delay and set it to run infinitely. Adjust the keyframe percentages and overall duration of the animation to get the desired timing. It just requires a bit of math, but I'm confident you can understand the technique!

Trigger the animation to run at regular intervals with an initial delay before starting and running on every iteration

Answer №1

Answer №2

Similar questions

The impact of CSS padding on the dimensions of a component

Changing the color of text in one div by hovering over a child div will not affect the

Determine the aspect ratio with a constant adjustment using CSS/SCSS

Are there any real-world examples you can share of utilizing CSS 3D Transforms?

What is the best way to apply a CSS class to a ComponentRef that has been generated in Angular 5

Replacing text in the main navigation bar with sIFR

Navigating on the horizontal axis within a container with overflow properties

The JavaScript-rendered HTML button is unresponsive

Use JQuery to constantly monitor for any changes in HTML Div

How come the position sticky content vanishes when a z-index is applied?

Customizing Bootstrap css variables for a unique design

Height and Width Dilemma in Visuals

Header text aligned with image to accommodate parent size

Positioning Tumblr blockquotes beneath each other, rather than within

A difference in the way content is displayed on Firefox compared to Chrome, Edge, and Safari

Implementing a feature that ensures html elements are transparent in a PDF conversion

A fading transparency box on the border

Guide to dynamically adding two CSS files in a single component in Angular 8

Animate images using mouse vertical movement

unitary incline division assemblage