1.code

import React, { useState, useEffect } from 'react';
import styles from './BouncingImage.module.css';

function BouncingImage({ imageUrl }) {
  const [isBouncing, setIsBouncing] = useState(false);

  
  useEffect(() => {
    setIsBouncing(true);

    
    const timeout = setTimeout(() => {
      setIsBouncing(false);
    }, 20); 

    return () => clearTimeout(timeout);
  }, []);

  return (
    <div className={`${styles.imageContainer} ${isBouncing ? styles.bounce : ''}`}>
      <img src={imageUrl} alt="Bouncing Image" className={styles.image} />
    </div>
  );
}

export default BouncingImage;

.imageContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px; 
    animation: bounce 2s ease infinite;
  }
  
  .image {
    width: 200px; 
    height: 200px;
  }
  
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-100px); 
    }
  }

2.實作