Components AI — A new way to explore generative design systems

Color Pulse

Canvas

First Color

Second Color

Animation

Name

Duration

Timing Function

Transition

Size

Height

Width

Css

@keyframes color {
0% { background-color: #79a48a }
53% { background-color: #a277b8 }
100% { background-color: #79a48a }
}

.animation-color-pulse { 
  animation-name: color;
  animation-direction: reverse;
  animation-duration: 1755ms;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}