I’m running into two issue with this animation.
- it starts out quickly flashing each pedal, but then goes into the correct animation cycle
- The last pedal hangs for a bit too and doesn’t give it a smooth continuous motion.
How could I make this smoother all-around?
:root {
--animation-speed: 0.4s; /* Total animation time for each petal */
--fill-time: 0.1s; /* Time each petal stays filled before the next starts */
--total-animation-duration: 3s; /* Total cycle time */
}
body {
background:black
}
.icon__flower {
display: block;
height: 105px;
margin: auto;
width: 110px;
}
/* Keyframes for the fill animation */
@keyframes fillAnimation {
0%, 100% {
fill-opacity: 0;
}
5%, 25% {
fill-opacity: 1;
}
}
/* Apply the fill animation to each petal */
.icon__flower path {
animation: fillAnimation var(--total-animation-duration) infinite;
}
.icon__flower path:nth-child(1) {
animation-delay: calc(0 * var(--animation-speed) + var(--fill-time));
}
.icon__flower path:nth-child(2) {
animation-delay: calc(1 * var(--animation-speed) + var(--fill-time));
}
.icon__flower path:nth-child(3) {
animation-delay: calc(2 * var(--animation-speed) + var(--fill-time));
}
.icon__flower path:nth-child(4) {
animation-delay: calc(3 * var(--animation-speed) + var(--fill-time));
}
.icon__flower path:nth-child(5) {
animation-delay: calc(4 * var(--animation-speed) + var(--fill-time));
}<div class="loading-animation"><svg class="icon icon__flower" viewBox="0 0 110 105" xmlns="http://www.w3.org/2000/svg"><path d="M55.483.264 66.29 17.751a21.32 21.32 0 0 1 0 22.498L55.483 57.736a.573.573 0 0 1-.966 0L43.71 40.249a21.32 21.32 0 0 1 0-22.498L54.517.264a.573.573 0 0 1 .966 0Z" fill="#fff"></path><path d="M109.866 40.542 96.529 55.967c-5.28 6.11-13.475 8.79-21.313 6.973l-19.793-4.588a.55.55 0 0 1-.289-.894l13.337-15.425c5.28-6.11 13.475-8.79 21.313-6.973l19.793 4.588a.549.549 0 0 1 .289.894Z" fill="#fff"></path><path d="M88.253 104.956 69.78 96.999c-7.314-3.15-12.318-10.13-13.017-18.15l-1.762-20.255a.54.54 0 0 1 .745-.55L74.22 66c7.314 3.15 12.318 10.13 13.017 18.15l1.762 20.255a.54.54 0 0 1-.745.55Z" fill="#fff"></path><path d="m20.003 104.405 1.813-20.255c.717-8.02 5.87-14.999 13.4-18.149l19.014-7.957a.55.55 0 0 1 .768.55L53.184 78.85c-.717 8.02-5.87 14.999-13.4 18.149l-19.014 7.957a.55.55 0 0 1-.767-.551Z" fill="#fff"></path><path d="m.423 39.648 19.793-4.588c7.838-1.817 16.032.863 21.313 6.973l13.337 15.425a.55.55 0 0 1-.288.894L34.782 62.94c-7.837 1.817-16.031-.863-21.312-6.973L.134 40.542a.55.55 0 0 1 .289-.894Z" fill="#fff"></path></svg></div>
2
Answers
Two problems
First the fill-opacity is not set to 0 so you see all the petals (not pedals) at the start.
Second, the duration of the whole animation must be number of petals * time a petal is to go from 0 to 1, hang around and then go from 1 to 0.
This snippet alters the timings accordingly, but you may like to slow it down a bit from the overall rate of 2s.
The last pedal hangs for a bit too ….
That’s because the
--total-animation-durationis greater than the time it takes for the petals to complete one cycle with respect to the animation-delay (It’s the result of the formula you are using to calculate the animation-delay.)Solution– Increase the
--animation-speedto0.6s. (In case you want to keep it to 0.4s, then you have to reduce the –total-animation-duration to 2s. )The second problem is that the petals are fully visible at the start of the animation.