Css spinning word effect - html

Question

Please, could someone help me accomplish the letter spinning effect on hover on this site? I managed to spin letters individually, but I'd like the whole word to flip with some delay among letters.
I've mostly followed this video. My code looks like this:
{/* html */}
<h1 className={styles.title}>
<div className={styles.letter_container}>
<span className={styles.letter}>s</span>
<span className={styles.letter}>o</span>
<span className={styles.letter}>n</span>
<span className={styles.letter}>g</span>
</div>
<div className={styles.letter_container}>
<span className={styles.letter}>o</span>
<span className={styles.letter}>f</span>
</div>
<div className={styles.letter_container}>
<span className={styles.letter}>t</span>
<span className={styles.letter}>h</span>
<span className={styles.letter}>e</span>
</div>
<div className={styles.letter_container}>
<span className={styles.letter}>d</span>
<span className={styles.letter}>a</span>
<span className={styles.letter}>y</span>
</div>
</h1>
/* css */
.letter_container {
display: flex;
flex-direction: row;
}
.letter {
cursor: pointer;
font-size: 4rem;
}
.letter_container span:hover {
animation: spin 1s infinite;
}
#keyframes spin {
from {
transform: rotateY(0deg);
}
to {
transform: rotateX(360deg);
}
}
Thank you in advance.

Answer 1

I'm not too sure, but if you'd like to spin the letters individually with delays between them like in the site, you could just add classes to the letters and make the whole animation start if they hover over the word.
.letter-1 {
transition-delay: 0.1s;
}
.letter-2 {
transition-delay: 0.1s;
}
or just add delays in-line style="--delay: 0.1s;" which is what they used in the website. I haven't looked into it too much so try inspecting the website's elements.
Extra CSS animation libraries if you still need them: Animate.css, Animista