Staggering CSS Animations

Staggered infinite CSS animation

You just need to calculate the whole animation duration with all the delays and set them accordingly like this:

.hex {
    animation: fio 1800ms ease-in-out infinite; /* This devided to three is the amount you want for the delay below */
    animation-delay: 3600ms; /* All animation delays in one + two + three and add animation duration above to this */
    transform: scale(.9);
    opacity: 0;
  &.one {
    animation-delay: 0ms;
    width: 50px;
    height: 50px;
    background-color: red;
  }

  &.two {
    animation-delay: 600ms;
    width: 50px;
    height: 50px;
    background-color: blue;
  }

  &.three {
    animation-delay: 1200ms;
    width: 50px;
    height: 50px;
    background-color: green;
  }
}

Fiddle: https://jsfiddle.net/2u43tc8z/2/

Staggered fade-in divs from 0 opacity

Option 1:

Remove the opacity: 1 from the .animated class and add animation-fill-mode: forwards. This setting means that the animated element will maintain the state as at its last keyframe (which has the opacity: 1) and so there is no need for the extra property setting.

window.onload = function() {  setTimeout(function() {    var els = document.querySelectorAll('.project');    for (var i = 0; i < els.length; i++) {      els[i].classList.add('animated');    }  }, 100);}

.project {  opacity: 0;}.project.animated {  /*opacity: 1;*/  animation-name: fadeInDown;  animation-duration: 1s;  animation-fill-mode: forwards;}.project.animated:nth-child(2) {  animation-delay: .3s;}.project.animated:nth-child(3) {  animation-delay: .6s;}@keyframes fadeInDown {  from {    opacity: 0;    transform: translate3d(0, -40%, 0);  }  to {    opacity: 1;    transform: none;  }}/* just for demo */
.project {  height: 100px;  width: 100px;  background: red;

<div class='project'>First</div><div class='project'>Second</div><div class='project'>Third</div>

Staggering CSS Animations

You could use

var els = $('.discrete'),
    i = 0,
    f = function () {
        $(els[i++]).addClass('out');
        if(i < els.length) setTimeout(f, 200);
    };
f();

Demo

Stagger CSS3 Animation Timing

Use nth-child to select each individual line then apply an animation-delay, like so:

.line:nth-child(1) {
    -webkit-animation-delay: 1s;
}
.line:nth-child(2) {
    -webkit-animation-delay: 2s;
}

Stagger css animation with jquery

As @disstruct suggest you may change CSS and reduce timeout to achieve cool effect. I prepare universal fiddle for anyone who wanna to play with it -
https://jsfiddle.net/skyr9999/rvknhq1m/

Here's the html:

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<button class="action">Action!</button>

and CSS:

.item {
  display: block;
  margin: 5px;
  width: 60px;
  height: 60px;
  background-color: #cd3455;
  transform: translateX(100px);
  opacity: 0.5;
  transition: all 1s cubic-bezier(.49,-0.57,1,.99)
}
.action {
  position: absolute;
  top: 5%;
  right: 5%;
}

and JS:

$(function() {
  $('button.action').on('click', function() {
  var duration = 250; //reduce it to have cool effects
    $('.wrap .item').each(function(i) {
      var $item = $(this);
      setTimeout(function() {
        $item.css({
          'opacity': 1,
          'transform': 'translateX(0)'
        });
      }, duration*i);
    });
  });
});

CSS animation, some animations finish, then repeat them in order

You will need to create a keyframe for each block:

.rotate {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg) ;
  display: flex;
  flex-wrap: wrap;
  width: 100px; /* change this to control the size */
}

.rotate div {
  flex:1 1 48%; /* little less than 50% to consider the margin */
  margin: 1px;
  background-color: black;
  animation: 2s linear infinite;
}
/* maintain square ratio*/
.rotate div::before {
  content: "";
  display: block;
  padding-top: 100%;
}
/**/
.rotate div:nth-child(1) { animation-name:fade4}
.rotate div:nth-child(2) { animation-name:fade1}
.rotate div:nth-child(3) { animation-name:fade3}
.rotate div:nth-child(4) { animation-name:fade2}

/* [0%  first one 20%][20% second one 40%][40% third one 60%][60% fourth one 80%][80%  pause 100%] */
@keyframes fade1 {
  0% {
    opacity: 1;
    transform: perspective(140px) rotateX(-180deg);
  }
  20%,100% {
    opacity: 0;
  }
}
@keyframes fade2 {
  0%,20% {
    opacity: 1;
    transform: perspective(140px) rotateX(-180deg);
  }
  40%,100% {
    opacity: 0;
  }
}
@keyframes fade3 {
  0%,40% {
    opacity: 1;
    transform: perspective(140px) rotateX(-180deg);
  }
  60%,100% {
    opacity: 0;
  }
}
@keyframes fade4 {
  0%,60% {
    opacity: 1;
    transform: perspective(140px) rotateX(-180deg);
  }
  80%,100% {
    opacity: 0;
  }
}

<section class="animation rotate">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

Staggered, sequential animation with delay

Staggered animation using CSS

Here's an example where you don't necessarily need JavaScript, but simply a style attribute containing a CSS var (variable) like style="--anim=N" where N is an index from 0 to N, and use CSS calc() for the animation-delay property:

.square {
  height: 3vh;
  aspect-ratio: 1;
  border: solid 2px grey;
  animation: fill 0.3s calc(var(--anim) * 1s) forwards;
}

@keyframes fill {
  to { background: grey; }
}

<div class="squares">
  <div class="square" style="--anim:0"></div>
  <div class="square" style="--anim:1"></div>
  <div class="square" style="--anim:2"></div>
  <div class="square" style="--anim:3"></div>
  <div class="square" style="--anim:4"></div>
</div>

Angular - stagger animation for list elements

Animation start and animation done will help here:

HTML

    <div class="project-view" (@content.start)="start($event)" 
    (@content.done)="done($event)" [@content]="isShowContent ? 'show-content': 'hide-content'">
        <div class="myClass">
            <div class="project-view-item">Hello</div>
            <div class="project-view-item">Hi</div>
            <div class="project-view-item">Hello</div>
            <div class="project-view-item">Hi</div>
            <div class="project-view-item">Hello</div>
            <div class="project-view-item">Hi</div>
            <div class="project-view-item">Hello</div>
            <div class="project-view-item">Hi</div>
        </div>
    </div>

Typescript:

  hideContent(callback?) {
    console.log("HIDE CONTENT CALLED");
    this.isShowContent = false;
    this.callback = callback;
  }

  showContent(callback?) {
    console.log("SHOW CONTENT CALLED");
    this.isShowContent = true;
    this.callback = callback;
  }

  done(event) {
    if (this.isShowContent) {
      document.querySelector('.myClass').setAttribute('style',
        "opacity:1;transform: 'translateX(0)')");
    }
    else {
      document.querySelector('.myClass').setAttribute('style',
        "opacity:0;transform: 'translateX(-40px)')");
    }

  }

  start(event) {
    document.querySelector('.myClass').setAttribute('style',
      "opacity:1; transform: 'translateX(-40px)')");
  }

Demo

---

Related Topics