Why my keyframes aren´t working as i hover over?

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">
                <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>

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

>Solution :

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;
}