Why my keyframes aren´t working as i hover over? [duplicate] - html

Question

This question already has answers here:
CSS transform doesn't work on inline elements
(2 answers)
Closed 14 days ago.
I am trying to do a css animation on different spans as i hover over them but they are not working and i cant figure out why.
This is my 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">
<i className="fab fa-linkedin-in"></i>
<i className="fab fa-github"></i>
</div>
</div>
And this is my 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);
}
}
So as i hover the property that changes the color works, but it seems that the animation isn´t being triggered or something because it doesn´t do anything

Answer 1

You should put display: inline-block on those spans for animation to work. You can't manipulate the size of them as they are inline elements by default:
.main .content h2 span{
font-size:2.8em;
font-weight:600;
display: inline-block;
}