.fireball
View Compiled
body {
  background: #333;
  overflow: hidden;
}

.fireball {
  position: absolute;
  top: calc(50% - 210px);
  left: calc(50% - 200px);
  animation: fireball 0.5s linear infinite;
}

@keyframes fireball {
  0%,
  25% {
    box-shadow: 200px 160px 0 0 rgba(255, 87, 34, 1),
      220px 160px 0 0 rgba(255, 87, 34, 1), 100px 180px 0 0 rgba(255, 87, 34, 1),
      120px 180px 0 0 rgba(255, 87, 34, 1), 140px 180px 0 0 rgba(255, 87, 34, 1),
      160px 180px 0 0 rgba(255, 87, 34, 1), 180px 180px 0 0 rgba(255, 87, 34, 1),
      200px 180px 0 0 rgba(255, 152, 0, 1), 220px 180px 0 0 rgba(255, 152, 0, 1),
      240px 180px 0 0 rgba(255, 152, 0, 1), 260px 180px 0 0 rgba(255, 152, 0, 1),
      140px 200px 0 0 rgba(255, 87, 34, 1), 160px 200px 0 0 rgba(255, 152, 0, 1),
      180px 200px 0 0 rgba(255, 193, 7, 1), 200px 200px 0 0 rgba(255, 152, 0, 1),
      220px 200px 0 0 rgba(255, 193, 7, 1), 240px 200px 0 0 rgba(255, 193, 7, 1),
      260px 200px 0 0 rgba(255, 152, 0, 1), 280px 200px 0 0 rgba(255, 87, 34, 1),
      120px 220px 0 0 rgba(255, 87, 34, 1), 140px 220px 0 0 rgba(255, 87, 34, 1),
      160px 220px 0 0 rgba(255, 152, 0, 1), 180px 220px 0 0 rgba(255, 193, 7, 1),
      200px 220px 0 0 rgba(255, 193, 7, 1),
      220px 220px 0 0 rgba(255, 255, 255, 1),
      240px 220px 0 0 rgba(255, 255, 255, 1),
      260px 220px 0 0 rgba(255, 193, 7, 1), 280px 220px 0 0 rgba(255, 87, 34, 1),
      140px 240px 0 0 rgba(255, 87, 34, 1), 160px 240px 0 0 rgba(255, 152, 0, 1),
      180px 240px 0 0 rgba(255, 152, 0, 1), 200px 240px 0 0 rgba(255, 193, 7, 1),
      220px 240px 0 0 rgba(255, 193, 7, 1), 240px 240px 0 0 rgba(255, 193, 7, 1),
      260px 240px 0 0 rgba(255, 193, 7, 1), 280px 240px 0 0 rgba(255, 87, 34, 1),
      160px 260px 0 0 rgba(255, 87, 34, 1), 180px 260px 0 0 rgba(255, 152, 0, 1),
      200px 260px 0 0 rgba(255, 152, 0, 1), 220px 260px 0 0 rgba(255, 193, 7, 1),
      240px 260px 0 0 rgba(255, 193, 7, 1), 260px 260px 0 0 rgba(255, 152, 0, 1),
      280px 260px 0 0 rgba(255, 87, 34, 1), 100px 280px 0 0 rgba(255, 87, 34, 1),
      120px 280px 0 0 rgba(255, 87, 34, 1), 140px 280px 0 0 rgba(255, 87, 34, 1),
      160px 280px 0 0 rgba(255, 87, 34, 1), 180px 280px 0 0 rgba(255, 87, 34, 1),
      200px 280px 0 0 rgba(255, 152, 0, 1), 220px 280px 0 0 rgba(255, 152, 0, 1),
      240px 280px 0 0 rgba(255, 152, 0, 1), 260px 280px 0 0 rgba(255, 152, 0, 1),
      180px 300px 0 0 rgba(255, 87, 34, 1), 200px 300px 0 0 rgba(255, 87, 34, 1),
      220px 300px 0 0 rgba(255, 87, 34, 1);
    height: 20px;
    width: 20px;
  }
  25.01%,
  50% {
    box-shadow: 180px 160px 0 0 rgba(255, 87, 34, 1),
      200px 160px 0 0 rgba(255, 87, 34, 1), 80px 180px 0 0 rgba(255, 87, 34, 1),
      120px 180px 0 0 rgba(255, 87, 34, 1), 140px 180px 0 0 rgba(255, 87, 34, 1),
      160px 180px 0 0 rgba(255, 87, 34, 1), 180px 180px 0 0 rgba(255, 87, 34, 1),
      200px 180px 0 0 rgba(255, 152, 0, 1), 220px 180px 0 0 rgba(255, 152, 0, 1),
      240px 180px 0 0 rgba(255, 152, 0, 1), 260px 180px 0 0 rgba(255, 87, 34, 1),
      160px 200px 0 0 rgba(255, 152, 0, 1), 180px 200px 0 0 rgba(255, 152, 0, 1),
      200px 200px 0 0 rgba(255, 193, 7, 1), 220px 200px 0 0 rgba(255, 193, 7, 1),
      240px 200px 0 0 rgba(255, 152, 0, 1), 260px 200px 0 0 rgba(255, 152, 0, 1),
      280px 200px 0 0 rgba(255, 87, 34, 1), 100px 220px 0 0 rgba(255, 87, 34, 1),
      120px 220px 0 0 rgba(255, 87, 34, 1), 140px 220px 0 0 rgba(255, 87, 34, 1),
      160px 220px 0 0 rgba(255, 152, 0, 1), 180px 220px 0 0 rgba(255, 152, 0, 1),
      200px 220px 0 0 rgba(255, 193, 7, 1),
      220px 220px 0 0 rgba(255, 255, 255, 1),
      240px 220px 0 0 rgba(255, 255, 255, 1),
      260px 220px 0 0 rgba(255, 152, 0, 1), 280px 220px 0 0 rgba(255, 87, 34, 1),
      160px 240px 0 0 rgba(255, 152, 0, 1), 180px 240px 0 0 rgba(255, 152, 0, 1),
      200px 240px 0 0 rgba(255, 152, 0, 1), 220px 240px 0 0 rgba(255, 193, 7, 1),
      240px 240px 0 0 rgba(255, 193, 7, 1), 260px 240px 0 0 rgba(255, 152, 0, 1),
      280px 240px 0 0 rgba(255, 87, 34, 1), 140px 260px 0 0 rgba(255, 87, 34, 1),
      160px 260px 0 0 rgba(255, 87, 34, 1), 180px 260px 0 0 rgba(255, 152, 0, 1),
      200px 260px 0 0 rgba(255, 193, 7, 1), 220px 260px 0 0 rgba(255, 193, 7, 1),
      240px 260px 0 0 rgba(255, 152, 0, 1), 260px 260px 0 0 rgba(255, 152, 0, 1),
      280px 260px 0 0 rgba(255, 87, 34, 1), 80px 280px 0 0 rgba(255, 87, 34, 1),
      100px 280px 0 0 rgba(255, 87, 34, 1), 120px 280px 0 0 rgba(255, 87, 34, 1),
      140px 280px 0 0 rgba(255, 87, 34, 1), 160px 280px 0 0 rgba(255, 152, 0, 1),
      180px 280px 0 0 rgba(255, 152, 0, 1), 200px 280px 0 0 rgba(255, 152, 0, 1),
      220px 280px 0 0 rgba(255, 152, 0, 1), 240px 280px 0 0 rgba(255, 152, 0, 1),
      260px 280px 0 0 rgba(255, 87, 34, 1), 160px 300px 0 0 rgba(255, 87, 34, 1),
      180px 300px 0 0 rgba(255, 87, 34, 1), 200px 300px 0 0 rgba(255, 87, 34, 1);
    height: 20px;
    width: 20px;
  }
  50.01%,
  75% {
    box-shadow: 120px 160px 0 0 rgba(255, 87, 34, 1),
      160px 160px 0 0 rgba(255, 87, 34, 1), 240px 160px 0 0 rgba(255, 87, 34, 1),
      60px 180px 0 0 rgba(255, 87, 34, 1), 80px 180px 0 0 rgba(255, 87, 34, 1),
      140px 180px 0 0 rgba(255, 87, 34, 1), 160px 180px 0 0 rgba(255, 87, 34, 1),
      180px 180px 0 0 rgba(255, 152, 0, 1), 200px 180px 0 0 rgba(255, 152, 0, 1),
      220px 180px 0 0 rgba(255, 152, 0, 1), 240px 180px 0 0 rgba(255, 152, 0, 1),
      260px 180px 0 0 rgba(255, 87, 34, 1), 160px 200px 0 0 rgba(255, 87, 34, 1),
      180px 200px 0 0 rgba(255, 152, 0, 1), 200px 200px 0 0 rgba(255, 152, 0, 1),
      220px 200px 0 0 rgba(255, 193, 7, 1), 240px 200px 0 0 rgba(255, 152, 0, 1),
      260px 200px 0 0 rgba(255, 152, 0, 1), 280px 200px 0 0 rgba(255, 87, 34, 1),
      80px 220px 0 0 rgba(255, 87, 34, 1), 100px 220px 0 0 rgba(255, 87, 34, 1),
      140px 220px 0 0 rgba(255, 87, 34, 1), 160px 220px 0 0 rgba(255, 152, 0, 1),
      180px 220px 0 0 rgba(255, 152, 0, 1), 200px 220px 0 0 rgba(255, 193, 7, 1),
      220px 220px 0 0 rgba(255, 255, 255, 1),
      240px 220px 0 0 rgba(255, 255, 255, 1),
      260px 220px 0 0 rgba(255, 152, 0, 1), 280px 220px 0 0 rgba(255, 87, 34, 1),
      160px 240px 0 0 rgba(255, 152, 0, 1), 180px 240px 0 0 rgba(255, 152, 0, 1),
      200px 240px 0 0 rgba(255, 193, 7, 1), 220px 240px 0 0 rgba(255, 193, 7, 1),
      240px 240px 0 0 rgba(255, 193, 7, 1), 260px 240px 0 0 rgba(255, 152, 0, 1),
      280px 240px 0 0 rgba(255, 87, 34, 1), 160px 260px 0 0 rgba(255, 87, 34, 1),
      180px 260px 0 0 rgba(255, 193, 7, 1), 200px 260px 0 0 rgba(255, 152, 0, 1),
      220px 260px 0 0 rgba(255, 193, 7, 1), 240px 260px 0 0 rgba(255, 152, 0, 1),
      260px 260px 0 0 rgba(255, 152, 0, 1), 280px 260px 0 0 rgba(255, 87, 34, 1),
      40px 280px 0 0 rgba(255, 87, 34, 1), 60px 280px 0 0 rgba(255, 87, 34, 1),
      140px 280px 0 0 rgba(255, 87, 34, 1), 160px 280px 0 0 rgba(255, 152, 0, 1),
      180px 280px 0 0 rgba(255, 87, 34, 1), 200px 280px 0 0 rgba(255, 152, 0, 1),
      220px 280px 0 0 rgba(255, 152, 0, 1), 240px 280px 0 0 rgba(255, 152, 0, 1),
      260px 280px 0 0 rgba(255, 87, 34, 1), 120px 300px 0 0 rgba(255, 87, 34, 1),
      140px 300px 0 0 rgba(255, 87, 34, 1), 160px 300px 0 0 rgba(255, 87, 34, 1),
      240px 300px 0 0 rgba(255, 87, 34, 1);
    height: 20px;
    width: 20px;
  }
  75.01%,
  100% {
    box-shadow: 100px 160px 0 0 rgba(255, 87, 34, 1),
      220px 160px 0 0 rgba(255, 87, 34, 1), 240px 160px 0 0 rgba(255, 87, 34, 1),
      260px 160px 0 0 rgba(255, 87, 34, 1), 40px 180px 0 0 rgba(255, 87, 34, 1),
      120px 180px 0 0 rgba(255, 87, 34, 1), 140px 180px 0 0 rgba(255, 87, 34, 1),
      160px 180px 0 0 rgba(255, 87, 34, 1), 180px 180px 0 0 rgba(255, 87, 34, 1),
      200px 180px 0 0 rgba(255, 152, 0, 1), 220px 180px 0 0 rgba(255, 152, 0, 1),
      240px 180px 0 0 rgba(255, 152, 0, 1), 260px 180px 0 0 rgba(255, 152, 0, 1),
      160px 200px 0 0 rgba(255, 87, 34, 1), 180px 200px 0 0 rgba(255, 152, 0, 1),
      200px 200px 0 0 rgba(255, 193, 7, 1), 220px 200px 0 0 rgba(255, 193, 7, 1),
      240px 200px 0 0 rgba(255, 193, 7, 1), 260px 200px 0 0 rgba(255, 152, 0, 1),
      280px 200px 0 0 rgba(255, 87, 34, 1), 60px 220px 0 0 rgba(255, 87, 34, 1),
      140px 220px 0 0 rgba(255, 87, 34, 1), 160px 220px 0 0 rgba(255, 87, 34, 1),
      180px 220px 0 0 rgba(255, 152, 0, 1), 200px 220px 0 0 rgba(255, 193, 7, 1),
      220px 220px 0 0 rgba(255, 255, 255, 1),
      240px 220px 0 0 rgba(255, 255, 255, 1),
      260px 220px 0 0 rgba(255, 193, 7, 1), 280px 220px 0 0 rgba(255, 87, 34, 1),
      140px 240px 0 0 rgba(255, 87, 34, 1), 160px 240px 0 0 rgba(255, 87, 34, 1),
      180px 240px 0 0 rgba(255, 152, 0, 1), 200px 240px 0 0 rgba(255, 193, 7, 1),
      220px 240px 0 0 rgba(255, 193, 7, 1), 240px 240px 0 0 rgba(255, 193, 7, 1),
      260px 240px 0 0 rgba(255, 152, 0, 1), 280px 240px 0 0 rgba(255, 87, 34, 1),
      160px 260px 0 0 rgba(255, 87, 34, 1), 180px 260px 0 0 rgba(255, 152, 0, 1),
      200px 260px 0 0 rgba(255, 152, 0, 1), 220px 260px 0 0 rgba(255, 193, 7, 1),
      240px 260px 0 0 rgba(255, 193, 7, 1), 260px 260px 0 0 rgba(255, 152, 0, 1),
      280px 260px 0 0 rgba(255, 87, 34, 1), 20px 280px 0 0 rgba(255, 87, 34, 1),
      180px 280px 0 0 rgba(255, 87, 34, 1), 200px 280px 0 0 rgba(255, 152, 0, 1),
      220px 280px 0 0 rgba(255, 152, 0, 1), 240px 280px 0 0 rgba(255, 152, 0, 1),
      260px 280px 0 0 rgba(255, 152, 0, 1), 120px 300px 0 0 rgba(255, 87, 34, 1),
      140px 300px 0 0 rgba(255, 87, 34, 1), 220px 300px 0 0 rgba(255, 87, 34, 1),
      240px 300px 0 0 rgba(255, 87, 34, 1), 260px 300px 0 0 rgba(255, 87, 34, 1);
    height: 20px;
    width: 20px;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.