CODEWITHSUNDEEP
css
petko_stankoski
petko_stankoski

Reputation: 10723

Style for blinking div

I have a div which I need to blink twice every 5 minutes if a certain checkbox is checked. I managed to do it to blink twice but I have trouble with the interval. This is my code:

<div class="my-status" [ngClass]="isChecked ? 'enabled-status' : 'disabled-status'"></div>

.enabled-status{
  background: $secondary;
  animation: blinker 1s linear 2;
}

.disabled-status{
  background: $gray;
}

@keyframes blinker {
  50% { opacity: 0; }
}

How do I do this to repeat every 5 minutes if the checkbox is checked?

Upvotes: 2

Views: 616

Answers (2)

Rounin
Rounin

Reputation: 29511

The <div> below will blink twice every 10 seconds.

To make it blink twice every 5 minutes, we need to:

  • change 10s to 300s
  • change 1%, 2%, 3%, 4% into something like 0.1%, 0.2%, 0.3%, 0.4%

Working Example:

.square {
  width: 100px;
  height: 100px;
  background-color: rgb(255, 0, 0);
  opacity: 1;
}

.blink {
  animation: blink 10s linear infinite;
}

@keyframes blink {
  1%, 3% {opacity: 0;}
  2%, 4% {opacity: 1;}
}
<div class="square blink"></div>

Upvotes: 5

Noa
Noa

Reputation: 1216

try this:

.enabled-status{
      background: $secondary;
      animation: blinker 300s linear infinite;
    }
    
    .disabled-status{
      background: $gray;
    }
    
    @keyframes blinker {
      50% { opacity: 0; }
    }

Upvotes: 1

Related Questions