animations.css

/* Utility Classes */
.animate{
    animation-duration: 1s;
    animation-fill-mode: both;
}
.animate .animate--infinte{
    animation-iteration-count: infinite;
}
.animate.animate--delay-1s{
    animation-delay: 1s;
}
.animate.animate--fast{
    animation-duration: 0.6s;
}
.animate.animate-slow{
    animation-duration: 1.5s;
}
@keyframes slideInLeft {
    from{
        transform: translateX(-300px);
    }
    to{
        transform: translateY(0);
    }
}
.slideInLeft{
    animation-name: slideInLeft;
    animation-timing-function: ease-in;
}

.my-image:hover, .timeline-image:hover, .Coding-travel:hover, .my-logo:hover{
    transform: translateY(-15px);
    transition: transform 0.4s;
    transition-timing-function: ease-in-out;
}
.animate-element {
    opacity: 0;
    transform: translateY(50px); /* Start out of view */
    transition: opacity 1s ease-out, transform 1s ease-out;
  }
  
  .animate-element.animate {
    opacity: 1;
    transform: translateY(0); /* End position */
  }