CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
user8974334
user8974334

Reputation: 23

How do you make pictures blink alternatively

I have two pictures that I want them to blink alternatively. I used CSS and javascript to blink individual picture but failed to make the second picture start to show up at the offset of the first picture. Is there any way to control the timing?

tried: first picture used the following and the second one reversed the opacity.

.blinking{
    -webkit-animation: blink 1s infinite;
    -moz-animation: blink 1s infinite;    
    animation: blink 1s infinite;
}

@-webkit-keyframes blink{

    100%{ opacity:1;}
    0%{opacity:0;}
}

@-moz-keyframes blink{

    100%{ opacity:1;}
    0%{opacity:0;}

}

@keyframes blink{

    100%{ opacity:1;}
    0%{opacity:0;}

}

Upvotes: 2

Views: 482

Answers (2)

Matt
Matt

Reputation: 2290

Try using animation-delay

.blinking {
  animation: blink 1s infinite;
}

.delay {
  animation-delay: .5s;
}

@keyframes blink {
  0% {
    opacity: 1;
  }      
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<div class="blinking">image 1</div>
<div class="blinking delay">image 2</div>

Upvotes: 2

Nalakira
Nalakira

Reputation: 110

Check out the animation delay property. You may be able to time the delay to start when the fist image is mid-blink.

https://www.w3schools.com/cssref/css3_pr_animation-delay.asp

Upvotes: 0

Related Questions