动画不适用于 React 组件

Question

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">🎉</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;

The span elements are appearing, but not animated.

Answer 1

add display: inline-block; . Inline elements behave like text, while block elements behave like containers. You cannot rotate text characters, but you can rotate their container

span.wave {
  display: inline-block;
  animation: wave 5s infinite;
}