/* 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 {

        width: 100px;

        height: 100px;

        background-color: #f1c40f;

        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;

                    }