Running animations without keyframes

January 09, 2025

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; 
rotate: 0turn; 
@starting-style {
rotate: -20turn; 
}
}

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: "";
inherits: false;
initial-value: 1000; 
}
.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; 
@starting-style {
--i: 0; 
}
}

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