See this animation:
- The golden div has an animation where a custom property is animated
(@keyframes roll-o-1
animates--o
).
This animates in steps. - The silver div has an animation where a normal property is animated
(@keyframes roll-o-2
animatesleft
).
This animates continuously.
Why doesn't the golden div animate smoothly?
Is there any workaround which also uses variables?
#one {
width: 50px;
height: 50px;
background-color: gold;
--o: 0;
animation: roll-o-1 2s infinite alternate ease-in-out both;
position: relative;
left: calc(var(--o) * 1px);
}
@keyframes roll-o-1 {
0% {
--o: 0;
}
50% {
--o: 50;
}
100% {
--o: 100;
}
}
#two {
width: 50px;
height: 50px;
background-color: silver;
--o: 0;
animation: roll-o-2 2s infinite alternate ease-in-out both;
position: relative;
}
@keyframes roll-o-2 {
0% {
left: 0px;
}
50% {
left: 50px;
}
100% {
left: 100px;
}
}
<div id="one"></div>
<br>
<div id="two"></div>
See Question&Answers more detail:os