I have an animation I would like to apply to all letters in a word when I hover over the word, but each letter in the word should be affected by the animation with an increasing delay. For example, if the animation was scaling each letter by 1.1, I would like the animation not to scale all letters at once, but instead scale each consecutive letter with a 0.1 second delay.

What I have at the moment is a component called FlickeringText which takes a string. Each character in the string gets wrapped in a <span style="animation-delay : ..."> tag, where the value of animation-delay is 0, 0.1, 0.2, 0.3, etc. for each character. I have a .css class activating the animation on hover. The animation is working, but it is not delayed for each character. What am I doing wrong?

Edit: inserted snippet and changed the css according to accepted answer

const Navbar = () => {
    return (
        <header className="Navbar">
            <nav className="Nav">
                <FlickeringText text="about me" link="/"/>
                <FlickeringText text="projects" link="/"/>
                <FlickeringText text="contact" link="/"/>
            </nav>
        </header>
    )
}

const FlickeringText = ({ text, link }) => {
    var wrapped_text = [];
    for (var i = 0; i < text.length; i  ) {

        // don't wrap whitespaces
        if (text[i] === " ") {
            wrapped_text.push(" ");
            continue;
        }

        var style = { animationDelay : 0.1 * i   's' };
        var wrapped_char = (<span style={style}>{text[i]}</span>);
        wrapped_text.push(wrapped_char);
    }

    return (
        <a href={link}> 
            {wrapped_text}
        </a>
    );
};

ReactDOM.render(<Navbar/>, document.body);

.Navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 70px;
  display: grid;
  grid-template-areas: "logo nav";
}

.Nav {
  display: grid;
  grid-area: nav;
  grid-template-columns: repeat(4, auto);
  align-items: center;
  justify-items: center;
}

.Nav a {
  color: #000;
  font-size: 20px;
  font-weight: 500;
  transition: 0.5s;
  text-decoration: none;
}

.Nav a:hover span {
  animation: flickText .25s infinite;
}

@keyframes flickText {
  0%,
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  3% {
    opacity: 0.2;
    -webkit-transform: scale(1.7);
    -moz-transform: scale(1.7);
    -ms-transform: scale(1.7);
    -o-transform: scale(1.7);
    transform: scale(1.7);
  }
  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

That's because you set animation on <a>, but set animation-delay on <span>.

animation cannot be inherited.

try:

.Nav a:hover span {
  animation: flickText .35s infinite;
 }