Simple Animation Techniques

HTML

<img src="http://placekitten.com/100/100" id="far">
<img src="http://placekitten.com/150/150" id="middle">
<img src="http://placekitten.com/200/200" id="near">

CSS

body {
    overflow-x: hidden;
}

img {
    border: 10px solid #fff;
    border-radius: 1em;
    box-shadow: 0 0 1em #000;
    left: 0;
    position: absolute;
}

#near {
    box-shadow: 0 0 2em #000;
    top: 400px;
}

#middle {
    box-shadow: 0 0 1.5em #000;
    top: 150px;
}

JavaScript

var $win = $( window ),
    $near = $( '#near' ),
    $middle = $( '#middle' ),
    $far = $( '#far' ),
    animateNear,
    animateMiddle,
    animateFar;

animateNear = function() {
    $near.css({
        left: $win.width()
    })
        .animate({
            left: 0 - $near.outerWidth()
         },
         {
             duration: 2000,
             easing: 'linear',
             complete: animateNear
         });
}
    
animateMiddle = function() {
    $middle.css({
        left: $win.width()
    })
        .animate({
            left: 0 - $middle.outerWidth()
         },
         {
             duration: 4000,
             easing: 'linear',
             complete: animateMiddle
         });
}
        
animateFar = function() {
    $far.css({
        left: $win.width()
    })
        .animate({
            left: 0 - $far.outerWidth()
         },
         {
             duration: 8000,
             easing: 'linear',
             complete: animateFar
         });
}
            
var moveKitten = function( $kitten ) {
    
    // Set left to left - 1
    $kitten.css({
        left: parseInt( $kitten.css( 'left' ) ) - 1
    });
    
    // Reset kitten to right if it moves off screen to the left
    if ( parseInt( $kitten.css( 'left' ) ) + $kitten.outerWidth() < 0 ) {
        
        $kitten.css({
            left: $win.width()
        });
    }
}
    
setInterval( (function() {
    moveKitten( $near );
}), 5 );

setInterval( (function() {
    moveKitten( $middle );
}), 10 );

setInterval( (function() {
    moveKitten( $far );
}), 20 );

/*
animateNear();
animateMiddle();
animateFar();
*/