Estoy usando reaccionar para representar un elemento de intervalo con la clase de "onda". Quiero que el lapso esté animado para ondear lentamente, pero eso no está sucediendo. Aquí está mi 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; }

aquí está mi 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">🎉</span> {count} times! <span className="wave">🎉</span></h1> </div> <div className="btnrow"> <button className="button1 noselect inrow" onClick={() => incrementCount(count + 1)}>+</button> <button className="button1 noselect inrow" onClick={() => incrementCount(count - 1)}>-</button> </div> <div className="btnrow"> <button className="button2 noselect ten" onClick={() => incrementCount(count + 10)}>+10</button> <button className="button2 noselect ten" onClick={() => incrementCount(count - 10)}>-10</button> <button className="button2 noselect ten" onClick={() => incrementCount(count + 100)}>+100</button> <button className="button2 noselect ten" onClick={() => incrementCount(count - 100)}>-100</button> </div> <div id="center"> <button className="button2 noselect" id="resetbtn" onClick={() => incrementCount(0)}>Reset Counter</button> </div> </div> ); } export default App;

Los elementos de intervalo aparecen, pero no están animados.