CSS animation with time interval

Pretty simple. The following code limits the transformation to keyframes 40%-60% (one fifth of the entire duration). So, if we give 6 seconds to the entire animation, 1.2s will be used for movement and 4.8s will be used for delay. You can play with it to get more accurate numbers.

@-webkit-keyframes rotation {
    0%, 40%   {-webkit-transform: rotate(0deg);}
    60%, 100% {-webkit-transform: rotate(90deg);}
}
@keyframes rotation {
    0%, 40% { transform: rotate(0deg); }
    60%, 100% { transform: rotate(90deg); }
}
.wrapper a:last-child div {
  -webkit-animation: rotation 6s infinite linear;
  animation: rotation 6s infinite linear;
}

Snippet

@-webkit-keyframes rotation {
    0%, 40% {-webkit-transform: rotate(0deg);}
    60%, 100%   {-webkit-transform: rotate(90deg);}
}
@keyframes rotation {
    0%, 40% { transform: rotate(0deg); }
    60%, 100% { transform: rotate(90deg); }
}
.wrapper {
  position: relative;
}
.wrapper a:first-child div{
  position: absolute;
  width:25px;
  height:25px;
  top: 13px;
  left: 13px; 
  background: red;
  z-index: 100;
}
.wrapper a:last-child div {
  width:50px;
  height:50px;
  position: relative;
  background: orange;
  -webkit-animation: rotation 6s infinite linear;
  animation: rotation 6s infinite linear;
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="wrapper">
    <a href="#"><div></div></a>
    <a href="#"><div></div></a>
  </div>
</body>
</html>

CSS animation with interval and delay only from the second time

Here you go. What I did is I changed the code so that complete animation ends at 20% and after that it will do nothing till 100%. For more details, visit this link

NOTE: You can clone the webkit to keyframes code as well. I removed it

  @-webkit-keyframes shake {
    2%,
    18% {
        -webkit-transform: translate3d(-1px, 0, 0);
        transform: translate3d(-1px, 0, 0);
    }
    4%,
    16% {
        -webkit-transform: translate3d(2px, 0, 0);
        transform: translate3d(2px, 0, 0);
    }
    6%,
    10%,
    14% {
        -webkit-transform: translate3d(-4px, 0, 0);
        transform: translate3d(-4px, 0, 0);
    }
    8%,
    12% {
        -webkit-transform: translate3d(4px, 0, 0);
        transform: translate3d(4px, 0, 0);
    }
    100%{
       -webkit-transform: translate3d(0px, 0, 0);
        transform: translate3d(0px, 0, 0);
    }
}

.error-container {
    position: absolute;
    left: auto;
    border-collapse: separate;
    margin: 0;
    padding: 2px 10px;
    list-style: none;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    background: #d9534f;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    display: none;
    z-index: 100;
    &.active {
        display: block;
       animation: shake 4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both  infinite;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
}

How to skip to a specific time in css-animations by seconds?

Changing animation-delay will do exactly that.

When you change it to negative values, it will jump forward.

const selectElement = document.querySelector('.number');
selectElement.addEventListener('change', (event) => {
  const result = document.querySelector('.some-div');
  result.style.animationDelay = `${event.target.value}s`;
});

.some-div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 20s;
  animation-delay: 0;
}

@keyframes example {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(400px);
  }
}

<div class="some-div"></div>
<input type="number" class="number" />
<br/>
change the value in the input

Run animation every 5 seconds/interval

You can do it with pure CSS, no JS/jQuery needed. In order to accomplish this, I set the animation-duration to 5 seconds, then multiplied all percentage values by 0.2 (because 1 second out of 5 seconds => 20%). Then translate back to 0px after the highest percentage value. And voilà, shaking every 5 seconds:

.shk {    transform: translate3d(0, 0, 0);    backface-visibility: hidden;    animation-name: shakeMe;    animation-duration: 5s;    animation-iteration-count: infinite;    animation-timing-function: linear;}
@keyframes shakeMe {    2%, 18% {        transform: translate3d(-5px, 0, 0);    }
    4%, 16% {        transform: translate3d(5px, 0, 0);    }
    6%, 10%, 14% {        transform: translate3d(-5px, 0, 0);    }
    8%, 12% {        transform: translate3d(5px, 0, 0);    }        18.1% {        transform: translate3d(0px, 0, 0);    }}

<div class="shk">Shake me</div>

CSS3 Animation On enter scaling timing function

There are 2 places where you can set a timing function: globally in the same place where you set the animation, or in the keyframes rule.

But, in the latter case, you have always n keyframes and n - 1 time intervals. IN your case, 2 keyframes and 1 time interval.

The timing function stated on a keyframe applies to the time interval that begins in this keyframe.

So, the correct way to apply a timing function on the keyframes would be on the first one:

@keyframes iconEnter {    0% {        transform: scale(0.1);        animation-timing-function: cubic-bezier(.25,8,.25,-8);    }    100% {        transform: scale(1);    }}

div {    width: 100px;    height: 100px;    margin: 100px;    background-color: tomato;    transform: scale(0.1);}body:hover div {    animation: iconEnter 4s forwards;}

<div></div>

How to synchronize CSS animations that were started/restarted at different times

For this purpose document.getAnimations() is a useful method. It returns an array of all animation objects currently in effect whose target elements are descendants of the document. More information: https://developer.mozilla.org/en-US/docs/Web/API/Document/getAnimations

Items of document.getAnimations() include currentTime property, that can use for syncing animations. More information: https://drafts.csswg.org/web-animations/#dom-documentorshadowroot-getanimations

toggleFx function was modified and now it has three parts.

In the first part, search document.getAnimations() and find currentTime attribute where animationName is one of pulse_active or pulse_inverted; then store them in the realted variables (i.e. pulseActiveStart and pulseInvertedStart).

In the 2nd part, className of spanTarget changed as you told.

In the 3rd part, pulseActiveStart and pulseInvertedStart applied to currentTime attribute of related animation (reverse 1st part).

function toggleFx(spanID) {

    let spanTarget = document.getElementById(spanID);
    
    let  pulseActiveStart;
    let  pulseInvertedStart;
    let anims = document.getAnimations()    
    for(let i = 0; i < anims.length; i++) { 
        if(anims[i].animationName == "pulse_active") pulseActiveStart = anims[i].currentTime;
        else if(anims[i].animationName == "pulse_inverted") pulseInvertedStart = anims[i].currentTime;      
    }
    
    
    
    if(spanTarget.classList.contains('pulse_invert')) {
        spanTarget.classList.remove('pulse_invert');    
        spanTarget.classList.remove('pulse');   
    } else if(spanTarget.classList.contains('pulse')) {
        spanTarget.classList.add('pulse_invert');   
        spanTarget.classList.remove('pulse');   
    } else {
        spanTarget.classList.add('pulse');  
    }
    
    anims = document.getAnimations()    
    for(let i = 0; i < anims.length; i++) { 
        if(anims[i].animationName == "pulse_active") {
            if(pulseActiveStart) anims[i].currentTime = pulseActiveStart;           
        } else if(anims[i].animationName == "pulse_inverted") {
            if(pulseInvertedStart) anims[i].currentTime = pulseInvertedStart;       
        }
    }
}

div {
  display: flex;
  flex-flow: column;
}

span.pulse {
    color: #f00;
    animation: pulse_active 1.5s ease-in infinite;
}

span.pulse_invert {
  color: #00f;
  animation: pulse_inverted 3s ease-in infinite;
}

@keyframes pulse_active {
    0% { opacity: 0; }
    50% { opacity: 0.66; }
    100% {  opacity: 0; }
}

@keyframes pulse_inverted {
    0% { opacity: 1; }
    50% { opacity: 0.33; }
    100% {  opacity: 1; }
}

<div>
  <span id="spA" onclick="toggleFx('spA')">A</span>
  <span id="spB" onclick="toggleFx('spB')">B</span>
  <span id="spC" onclick="toggleFx('spC')">C</span>
  <span id="spD" onclick="toggleFx('spD')">D</span>
</div>

CSS Animation with Time Interval