Seek to Specific Keyframe in CSS3 Animation

Seek to specific keyframe in css3 animation

You can seek to a specific keyframe by using a negative animation-delay value.

How to stack keyframes in CSS animation programmatically

Set r class for your rects and I think this can help you:

const blocks = document.querySelectorAll('svg rect');

for (let i = 1; i<blocks.length; i++) {
    const element = blocks[i];
  const prevElementStyles = getComputedStyle(blocks[i-1]);

  
  element.style.animationDelay = `${parseFloat(prevElementStyles.animationDelay) + parseFloat(prevElementStyles.animationDuration)}s`;
}

r class:

.r {
  animation-name: move1;
  animation-delay: 0.5s;      
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="r" x="10" y="20" width="100" height="100" fill="red"/>
    <rect class="r" x="10" y="130" width="100" height="100" fill="green"/>
    <rect class="r" x="10" y="240" width="100" height="100" fill="blue"/>
</svg>

Animate CSS keyframes back to initial state

You need 2 different animations for this. Just changing the direction won't retrigger the animation.

For instance:

$('#show').on('click', function() {

 $('#slide').removeClass('hidden');

});

$('#hide').on('click', function() {

 $('#slide').addClass('hidden');

});

#slide {

  background: #333;

  color: #fff;

  font-size: 14px;

  font-weight: bold;

  text-align: center;

  width: 200px;

  padding: 20px;

  margin-bottom: 30px;

  display: block;

  animation-iteration-count: 1;

  animation-direction: normal;

  animation-duration: 0.4s;

  animation-delay: 0s;

  animation-timing-function: ease;

  animation-fill-mode: both;

        opacity: 0;

        transform: translateY(-50%);

}

.animation1 {

  animation-name: slide;

}

#slide.hidden {

  animation-name: slide2;

}

@keyframes slide {

    to {

        opacity: 1;

        transform: translateY(0%);

    }

}

@keyframes slide2 {

    from {

        opacity: 1;

        transform: translateY(0%);

    }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="slide" class="animation1">

  <p>Lorem ipsum dolor sit amet, ius no feugiat vulputate, hendrerit quaerendum instructior ei eum. Fabellas percipitur definitionem ex vel.</p>

</div>

<button id="show">Show</button>

<button id="hide">Hide</button>

---

Related Topics