在React中连续上下移动图像

import React, { Component } from 'react';

class MovingImage extends Component {
  render() {
    return (
      <div className="moving-image">
        <img src={this.props.imageUrl} alt="Moving Image" />
      </div>
    );
  }
}

export default MovingImage;

.moving-image {
  position: absolute;
  top: 0;
  left: 0;
  animation: moveUpDown 2s infinite;
}

@keyframes moveUpDown {
  0%, 100% {
    top: 0;
  }
  50% {
    top: 100px;
  }
}

import React, { Component } from 'react';
import MovingImage from './MovingImage';

class App extends Component {
  render() {
    return (
      <div>
        <MovingImage imageUrl="https://example.com/image.png" />
      </div>
    );
  }
}

export default App;