Keyframe Animation

Keyframe animation is helpful when you have complex animations with multiple paths.

.keyframeStart {
        animation: stepper 1000ms;
        transform-origin: center;
        transition-timing-function: ease-out;
    }
    
@keyframes stepper {
    0% {
        transform: translateX(0px);
    }
    
    20% {
        transform: translateX(100px);
    }
    
    40% {
        transform: translateX(-60px);
    }
    
    60% {
        transform: translateX(30px);
    
    }
    
    80% {
        transform: translateX(-15px);
    
    }
    
    100% {
        transform: translateX(0px);
    
    }
}