反应动画延迟样式没有效果

Question

我有一个动画，当我将鼠标悬停在单词上时，我想将其应用于单词中的所有字母，但是单词中的每个字母都会受到动画的影响，并且延迟会增加。例如，如果动画将每个字母缩放 1.1，我希望动画不要一次缩放所有字母，而是以 0.1 秒的延迟缩放每个连续的字母。

我现在拥有的是一个名为 FlickeringText 的组件，它接受一个字符串。字符串中的每个字符都包含在<span style="animation-delay : ..."> 标记中，其中每个字符的animation-delay 值为0、0.1、0.2、0.3 等。我有一个 .css 类在悬停时激活动画。动画正在运行，但每个角色都没有延迟。我做错了什么？

编辑：插入 sn-p 并根据接受的答案更改 css

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>

Answer 1

那是因为你在<a> 上设置了动画，但在<span> 上设置了animation-delay。

动画不能被继承。

尝试：

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