src/cobalt/demos/content/animations-demo/layer_sun.css

@keyframes sun-blade-rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dark-color-pulse {
  0% {
    background-color: rgb(255, 155, 50);
  }
  100% {
    background-color: rgb(155, 255, 50);
  }
}

@keyframes light-color-pulse {
  0% {
    background-color: rgb(50, 230, 155);
  }
  100% {
    background-color: rgb(50, 150, 255);
  }
}

@keyframes sun-blade-bouncy-scale {
  0% {
    transform: scale(0.75);
  }
  100% {
    transform: scale(1);
  }
}

.sun-blade-dark {
  position: absolute;
  left: -12%;
  top: -12%;
  width: 124%;
  height: 124%;
  background-color: rgb(0, 0, 0);

  animation: sun-blade-rotation 4s infinite linear,
             dark-color-pulse 4s infinite ease-in-out alternate;
}

.sun-blade-light {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);

  animation: sun-blade-rotation 4s infinite linear,
             light-color-pulse 4s infinite ease-in-out alternate;
}

.sun-blade-scale-container {
  position: absolute;
  left: 12.5%;
  top: 12.5%;
  width: 75%;
  height: 75%;
  animation: sun-blade-bouncy-scale 1.5s infinite ease-in-out alternate;
}

.sun-blade-layer-container {
  position: absolute;
  left: -500px;
  top: -500px;
  width: 1000px;
  height: 1000px;
}