How to Use SCSS/Sass to Increase Animation-Delay for Concurrent Divs

How to use SCSS/SASS to increase animation-delay for concurrent divs

You can use a for loop in Sass to do this like so:

@for $i from 1 to 10 {
  .results div:nth-child(#{$i}) { animation-delay: $i * 0.25s; }
}

Then you can do it for any number of divs by making the 10 to what ever you need.

animation-delay property isn't working in Sass for loop

@JackHasaKeyboard, it's an issue of specificity.

#prog {
  height: 76px;
  display: flex;
  justify-content: center;
  align-items: center;
  .dot {
    animation: pulse 1.6s infinite;
  }
}

@for $i from 1 through 3 {
  #prog .dot:nth-child(#{$i}) {
    animation-delay: $i * 1.6s;
    background: red;
  }
}

Add the #prog id to your loop and it should work.

Here's a fork of your jsfiddle.

Sass mixin for looping animations

You don't need a mixin for that.The @for directive should fit your needs.

#case-studies .item {
  animation: card__moveIn 2s cubic-bezier(.22,1,.32,1) var(--delay) backwards;
}

@for $i from 1 through 13 {
  #case-studies .item:nth-child(#{$i}) {
    --delay: #{(1 + 0.1667 * ($i - 1))}s;
  }
}

You can see the output here

Css Animation - animation delay

My solution:

http://codepen.io/anon/pen/JGWmJg?editors=110

.real-time-animation{  margin-top: 20px;  position: relative;  transform: scale(0.5) rotate(45deg);  transform-origin: 5% 0%;}
.circle1, .circle2, .circle3{  animation: 4s infinite ease-in;  animation-delay: 1s;}
.circle1{  animation-name: circle1;}
.circle2{  animation-name: circle2;}.circle3{  animation-name: circle3;}
@keyframes circle1 {  0%{    opacity: 0;  }    25%{    opacity: 0;  }    50%{    opacity: 0;  }  75%{    opacity: 1;  }    100% {     opacity: 0;  }}
@keyframes circle2 {  0%{    opacity: 0;  }    25%{    opacity: 0;  }    50%{    opacity: 1;  }  75% {     opacity: 1;  }  100%{    opacity: 0;  }}
@keyframes circle3 {  0%{    opacity: 0;  }    25%{    opacity: 1;  }    50%{    opacity: 1;  }  75% {     opacity: 1;  }  100%{    opacity: 0;  }}
.circle {    position: relative;    width: 16em; height: 16em;    border-radius: 50%;    background: transparent;    border: 20px solid transparent;    border-top-color: darkblue;    position: absolute;    top: 0;    left: 0;    opacity: 0;}
.circle2{    top: 40px;    width: 12em;    height: 12em;    left: 33px;}
.circle3{    top: 80px;    width: 8em;    height: 8em;    left: 66px;}

Animation and transition timeout isn't working

I managed to solve it by increasing the animation duration from 0s to 4s. Having it at 0 caused the hiding animation to execute instantly, thus preventing the opacity transition to run in parallel with the animation. I also decreased the opacity duration to 3s instead of 4s to allow it to be completely hidden before setting the width and height to 0, which would cause the text to jump down in an oddly fashion for a split second before it became completely hidden.

I also realised that I had already set the delay in the shorthand so I could remove the animation-delay property altogether.

.success {
  color: green;
  opacity: 1;
  -webkit-transition-delay: 3s;
  transition-delay:         3s;
  -webkit-transition: opacity 4s ease-in-out;
  transition:         opacity 4s ease-in-out;
}

.success--auto-hide {
  opacity: 0;
  -webkit-animation: cssAnimation 4s ease-in 4s forwards;
  -moz-animation:    cssAnimation 4s ease-in 4s forwards;
  -o-animation:      cssAnimation 4s ease-in 4s forwards;
  animation:         cssAnimation 4s ease-in 4s forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode:         forwards;
}

Play multiple CSS animations at the same time

TL;DR

With a comma, you can specify multiple animations each with their own properties as stated in the CriticalError answer below.

Example:

animation: rotate 1s, spin 3s;

Original answer

There are two issues here:

#1

-webkit-animation:spin 2s linear infinite;
-webkit-animation:scale 4s linear infinite;

The second line replaces the first one. So, has no effect.

#2

Both keyframes applies on the same property transform

As an alternative you could to wrap the image in a <div> and animate each one separately and at different speeds.

http://jsfiddle.net/rnrlabs/x9cu53hp/

.scaler {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    animation: scale 4s infinite linear;    
}

.spinner {
    position: relative;
    top: 150px;
    animation: spin 2s infinite linear;
}

@keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
}

@keyframes scale {
    100% {
         transform: scaleX(2) scaleY(2);
    }
}

<div class="spinner">
<img class="scaler" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="Sample Image" width="120" height="120">
<div>

---

Related Topics