CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
anonymous axolotl
anonymous axolotl

Reputation: 23

Different animation durations for the same CSS animation

I'm trying to have multiple divs with text that all use the same CSS animation- (blinking), but they should all blink at different rates. Let's say I want the first div to blink once every 2 seconds and the second div to blink once every 4 seconds.

Is there any way to do this?

Here is my code:

.blink {
  animation-duration: 2s;
  /*this is what i'm trying to change*/
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.1
  }
}
<div class="blink">hello</div>
<div class="blink">explosion</div>

Upvotes: 2

Views: 91

Answers (2)

Shameen
Shameen

Reputation: 3268

One way to do this is to split the duration into its own class, and use multiple classes in HTML (with .blink as the main class):

.blink {
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
.blink-1s {
  animation-duration: 1s;
}
.blink-2s {
  animation-duration: 2s;
}
.blink-3s {
  animation-duration: 3s;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    51% {
        opacity: 0.1;
    }
    100% {
        opacity: 0.1
    }
}
<div class="blink blink-1s">one second</div>
<div class="blink blink-2s">two seconds</div>
<div class="blink blink-3s">three seconds</div>

Upvotes: 0

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

by using :first-child and :last-child you can control animation-duration for each of them

.blink:first-child {
animation-duration: 0.5s; /*this is what i'm trying to change*/
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.blink:last-child {
animation-duration: 1s; /*this is what i'm trying to change*/
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    51% {
        opacity: 0.1;
    }
    100% {
        opacity: 0.1
    }
}

Demo

or the same

.blink{
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.blink:first-child {
animation-duration: 0.5s; /*this is what i'm trying to change*/
}
.blink:last-child {
animation-duration: 1s; /*this is what i'm trying to change*/
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    51% {
        opacity: 0.1;
    }
    100% {
        opacity: 0.1
    }
}

Demo

while you said (multiple divs) you can use :nth-child(n) for divs like

.blink:nth-child(1) {  // for first div
.blink:nth-child(2) {  // for second div
.... so on

Upvotes: 2

Related Questions