@SempervivumAug 03.2021 — #Yes it is possible but would be fairly expensive when sticking to do this in plain CSS as all the rules for the animations would have to be duplicated. However you can take advantage of the Webanimation API of javascript and do the same with a few lines of code: ``<i> </i> const stepDelay = 50, aniDuration = 300, aniEasing = 'ease-in-out', colOdd = '#9f9fed', colEven = '#736ced', colBase = 'white'; const logo = document.querySelector('#svg-logo'); const paths = document.querySelectorAll('#svg-logo path'); const aniKfEven = [ { fill: colEven } ]; const aniKfOdd = [ { fill: colOdd } ]; const aniKfRev = [ { fill: colBase } ];
// Animation forwards: Colorize paths one by one function makeAnimation() { for (let i = 0; i < paths.length; i++) { const aniKf = i % 2 ? aniKfOdd : aniKfEven; const aniOpt = { delay: i * stepDelay, duration: aniDuration, iterations: 1, fill: 'forwards', direction: 'normal', easing: aniEasing }; ani = paths[paths.length - i - 1].animate(aniKf, aniOpt); ani.play(); } }
// Animation backwards: Remove colors from paths one by one function makeAnimationRev() { for (let i = 0; i < paths.length; i++) { const aniKf = aniKfRev; const aniOpt = { delay: i * stepDelay, duration: aniDuration, iterations: 1, fill: 'forwards', direction: 'normal', easing: aniEasing }; ani = paths[i].animate(aniKf, aniOpt); ani.play(); } } logo.addEventListener('mouseover', makeAnimation); logo.addEventListener('mouseout', makeAnimationRev);<i> </i>`</CODE> The Webanimation API is described here, e. g.:<br/> <URL url="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API</URL><br/> The rule for the animations can then be omitted in the CSS: <CODE>`<i> </i> :root { --white: #fef9ff; --pink: #f2dfd7; --lightblue: #d4c1ec; --midblue: #9f9fed; --purple: #736ced; --dark: #1a1a1a; --mono: "Share Tech Mono", monospace; --montserrat: "Montserrat", sans-serif; --animationTime: 150ms; }
body { background: var(--dark); }
#svg-logo { width: 300px; height: 150px; cursor: pointer; } #svg-logo path { /* Deactivate mouse actions in order to prevent them from bubbling up and causing multiple starts of the animation */ pointer-events: none; }<i>
@SempervivumAug 03.2021 — #aniKf are the keyframes of the animation. This corresponds to css @keyframes. In this case there is only one keyframe specifying the status at the end of the animation. Maybe this is a bit misleading.
aniOpt are the options being handed over to the function animate. This object corresponds to `animation:</C> in CSS.
<C>%</C> is the modulo operator:<br/> <URL url="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder</URL><br/> In this context it is used to determine if <C>i</C> is odd or even, thus your assumption is correct: If <C>i % 2</C> results in 1 <C>i` is odd, if it results in 0, it is even.