CSS Tip

Running animations without keyframes

Using the new @starting-style you can create animations without using @keyframes. It's not a replacement for the classic way to create animations but it can be a useful CSS trick in some situations.

Here is a simple example with a rotation. I am using big values to simulate an infinite rotation.

.box {
  transition: 40s linear 1s; /* duration easing delay */
  rotate: 0turn; /* To (can be removed as it's the default value) */
  @starting-style {
    rotate: -20turn; /* From */
  }
}

See the Pen Infinite rotation without keyframes by Temani Afif (@t_afif) on CodePen.

Here is a more generic example where I animate one variable and then use it within different properties

@property --i {
  syntax: "<number>";
  inherits: false;
  initial-value: 1000; /* To */
}
.box {
  background: hsl(calc(var(--i)*10) 80% 50%);
  translate: 0 calc(sin(var(--i))*20px);
  rotate: calc(clamp(0,mod(var(--i),10) - 5,1)*90deg);

  transition: --i 120s linear 1s; /* duration easing delay */
  @starting-style {
    --i: 0; /* From */
  }
}

See the Pen Complex animation without keyframes by Temani Afif (@t_afif) on CodePen.

Again, I am not saying it's better than an animation combined with keyframes. It's just a different way to express animations.

More CSS Tips