Animation not working with React Component-CodePudding

I am using react to render a span element with the class of "wave". I want the span to be animated to slowly wave, but that is not happening. Here is my css:

@keyframes wave {
    0% { transform: rotate(5deg); }
    10% { transform: rotate(-5deg); }
    20% { transform: rotate(5deg); }
    30% { transform: rotate(-5deg); }
    40% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg); }
    60% { transform: rotate(5deg); }
    100% { transform: rotate(5deg); }
}

span.wave {
  animation: wave 5s infinite;
}

here is my jsx:

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, incrementCount] = useState(0);

  return (
    <div>
      <div id="buttonClass" className="centered">
        <h1 className="noselect">You have</h1>
        <input id="nameInput" placeholder="Clicked (edit me)" autoFocus autocomplete="off"></input>
        <h1 className="noselect"><span className="wave">