Run animation every x seconds with delay at at begining and every each iteration-CodePudding

I have an HTML button I want to spin. I need it to start spinning after 5 seconds. when it starts spinning, it does it for 2 seconds and stops for 5 seconds and after that start spinning again for 2 seconds and stop for 5 seconds and so on forever. How can I do that? I looked for some suggestions but I couldn't find a proper solution. Here is my code, 400ms must be kept because it is the speed of the spinning:

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


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

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

   100%{
     transform: rotateZ(10deg);
  `enter code here` }
 }

CodePudding user response：

the trick to get that delay between 2 runs is to insert a keyframe which just does nothing (the 60% one in my example) so the 40% that follows from that point dont do anything compared to the 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;
}

you get the first delay with animation-delay. dont forget to have it running infinite. in order to get the right duration you might need to change the keyframe % and the duration of the whole animation (just a bit math), but Im sure you understand the trick!

CodePudding user response：

You can use Infinite in CSS to specify that you want to run that animation again and again. So, change your code to this:

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


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

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

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

Now, since I don't know the specific order of the shorthand property animation just try to put that infinite here and there in the line. And it will work perfectly.