<div class="bomb"></div>
@keyframes explosion { 
  @for $i from 1 through 10 {
    $number: $i * 10;
    $percent: $number + "%";
    #{$percent} {
      content: $i + "";
      color: white;
      font-size: $i * 20px;
    }
  }
}

.bomb {
  display: flex;
  align-items: center;
  justify-content: center;
  
  &:after {
    font-size: 300px;
    content: "BOOM!";
    display: block;
    color: red;
    text-align: center;
    animation: explosion 7s linear infinite reverse;
    transition: color .1s ease;  
  }
}

html, body {
  height: 100%;
}

body {
  font-family: "fira-sans-2", Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;
  font-weight: bold;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.