/* Bounce animation */
    @keyframes bounce {
        0%, 100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-100px);
        }
      }
      .bounce {
        width: 100px;
        height: 100px;
        background-color: #e74c3c;
        border-radius: 50%;
        animation: bounce 2s infinite;
      }
  
      /* Fade-in animation */
      @keyframes fadeIn {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      
      .fade-in {
        opacity: 0;
        animation: fadeIn 3s forwards;
      }
  
      /* Rotating animation */
      @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      .rotate {

        animation: rotate 2s linear infinite;
      }
  
      /* Pulsing animation */
      @keyframes pulse {
        0%, 100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.5);
        }
      }
      .pulse {
        width: 100px;
        height: 100px;
        background-color: #2ecc71;
        border-radius: 50%;
        animation: pulse 2s infinite;
      }
  
  
      /* General styles for the boxes */
      .box {
        width: 200px;
        height: 100px;
        margin: 20px;
        background-color: #3498db;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Arial, sans-serif;
        opacity: 0;
      }
  
      /* Animation keyframes */
      @keyframes fadeInLeft {
        0% {
          transform: translateX(-100%);
          opacity: 0;
        }
        100% {
          transform: translateX(0);
          opacity: 1;
        }
      }
  
      @keyframes fadeInRight {
        0% {
          transform: translateX(100%);
          opacity: 0;
        }
        100% {
          transform: translateX(0);
          opacity: 1;
        }
      }
  
      @keyframes fadeInTop {
        0% {
          transform: translateY(-100%);
          opacity: 0;
        }
        100% {
          transform: translateY(0);
          opacity: 1;
        }
      }
  
      @keyframes fadeInBottom {
        0% {
          transform: translateY(100%);
          opacity: 0;
        }
        100% {
          transform: translateY(0);
          opacity: 1;
        }
      }
  
      /* Applying the animations to each box */
      .fade-in-left {
        animation: fadeInLeft 2s forwards;
      }
  
      .fade-in-right {
        animation: fadeInRight 2s forwards;
      }
  
      .fade-in-top {
        animation: fadeInTop 2s forwards;
      }
  
      .fade-in-bottom {
        animation: fadeInBottom 2s forwards;
      }

                 /* Basic styles for the boxes */
                 .box1 {
                    width: 200px;
                    height: 100px;
                    background-color: #3498db;
                    color: white;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-family: Arial, sans-serif;
                    margin: 20px;
                    }
        
                    /* Slide in from left */
                    @keyframes slideInLeft {
                    0% {
                        transform: translateX(-100%);
                        opacity: 0;
                    }
                    100% {
                        transform: translateX(0);
                        opacity: 1;
                    }
                    }
        
                    /* Slide in from right */
                    @keyframes slideInRight {
                    0% {
                        transform: translateX(100%);
                        opacity: 0;
                    }
                    100% {
                        transform: translateX(0);
                        opacity: 1;
                    }
                    }
        
                    /* Slide in from top */
                    @keyframes slideInTop {
                    0% {
                        transform: translateY(-100%);
                        opacity: 0;
                    }
                    100% {
                        transform: translateY(0);
                        opacity: 1;
                    }
                    }
        
                    /* Slide in from bottom */
                    @keyframes slideInBottom {
                    0% {
                        transform: translateY(100%);
                        opacity: 0;
                    }
                    100% {
                        transform: translateY(0);
                        opacity: 1;
                    }
                    }
        
                    /* Applying the animations */
                    .slide-left {
                    animation: slideInLeft 1s ease-out forwards;
                    }
        
                    .slide-right {
                    animation: slideInRight 1s ease-out forwards;
                    }
        
                    .slide-top {
                    animation: slideInTop 1s ease-out forwards;
                    }
        
                    .slide-bottom {
                    animation: slideInBottom 1s ease-out forwards;
                    }