为何鼠标悬停时CSS关键帧动画未生效？

尝试给多个span元素添加鼠标悬停的CSS关键帧动画，仅颜色切换正常，动画未触发。相关代码如下：

HTML代码 #

<div className="content">
    <h2>Hello, I´m <br/> 
    <span className='bounce'>M</span>
    <span className='bounce'>a</span>
    <span className='bounce'>t</span>
    <span className='bounce'>e</span>
    <span className='bounce'>o </span> 
    <span className='bounce'>G</span>
    <span className='bounce'>h</span>
    <span className='bounce'>i</span>
    <span className='bounce'>d</span>
    <span className='bounce'>i</span>
    <span className='bounce'>n</span>
    <span className='bounce'>i</span></h2>
    <div className="animated-text">
        <h3>Web Designer</h3>
        <h3>Jr Full-stack Web Developer</h3>
    </div>
    <Button className="btn" content="See My Work"/>
    <div className="media-icons">
        <a href="https://www.linkedin.com/in/mghidini/"><i className="fab fa-linkedin-in"></i></a>
        <a href="https://github.com/mateoghidini1998"><i className="fab fa-github"></i></a>
    </div>
</div>

CSS代码 #

.main .content h2{
 color:#FFF;
 font-size:2em;
 font-weight:500;   
}

.main .content h2 span{
    font-size:2.8em;
    font-weight:600;
}

.main .content h2 span:hover{
    color: #08fdd8;
    animation: animate 0.6s;
}

@keyframes animate {
    25%{
        transform: scale(0.8, 1.3);
    }
    50%{
        transform: scale(1.1, 0.8);
    }
    75%{
        transform: scale(0.7, 1.2);
    }
}

问题原因 #

span元素默认是行内(inline)元素，CSS的transform属性对行内元素不生效，这是动画未触发的核心原因。颜色切换属于文本样式，不受元素display类型限制，因此能正常生效。

解决方案 #

给span元素设置display: inline-block;（保持文本流布局的同时支持transform），修改后的CSS代码如下：

.main .content h2 span{
    font-size:2.8em;
    font-weight:600;
    display: inline-block; /* 添加该行，让元素支持transform */
}

.main .content h2 span:hover{
    color: #08fdd8;
    animation: animate 0.6s;
}

@keyframes animate {
    25%{
        transform: scale(0.8, 1.3);
    }
    50%{
        transform: scale(1.1, 0.8);
    }
    75%{
        transform: scale(0.7, 1.2);
    }
}

添加该属性后，悬停时的scale动画就能正常触发了。

内容的提问来源于stack exchange，提问作者tukitooo1998