CSS vs animations vs transit (v3)

$('#moving-1').animate({
  top: 0,
  width: 1200,
  height: 300,
  left: 200,
  opacity: 0.1
}, 800);

$('#moving-2').delay(600).animate({
  top: 220,
  width: 1000,
  height: 100,
  left: 300,
  opacity: 0.3
}, 600);

$('#moving-3').delay(1000).animate({
  top: 0,
  width: 800,
  height: 400,
  left: 500,
  opacity: 0.9
}, 900);

$('#moving-4').delay(200).animate({
  top: 490,
  width: 1700,
  height: 800,
  left: 100,
  opacity: 0.2
}, 1000);

$('#moving-5').delay(1300).animate({
  top: 0,
  width: 1400,
  height: 900,
  left: 100,
  opacity: 0.3
}, 1600);

$('#moving-6').delay(1900).animate({
  top: 300,
  width: 600,
  height: 600,
  left: 600,
  opacity: 0.4
}, 300);

$('#moving-7').delay(500).animate({
  top: 0,
  width: 200,
  height: 800,
  left: 800,
  opacity: 0.4
}, 1200);

$('#moving-8').delay(1000).animate({
  top: 300,
  width: 600,
  height: 1200,
  left: 400,
  opacity: 0.9
}, 1400);

$('#moving-9').delay(2300).animate({
  top: 300,
  width: 100,
  height: 300,
  left: 800,
  opacity: 0.6
}, 900);

$('#moving-1').transition({
  top: 0,
  width: 1200,
  height: 300,
  left: 200,
  opacity: 0.1
}, 800);

$('#moving-2').delay(600).transition({
  top: 220,
  width: 1000,
  height: 100,
  left: 300,
  opacity: 0.3
}, 600);

$('#moving-3').delay(1000).transition({
  top: 0,
  width: 800,
  height: 400,
  left: 500,
  opacity: 0.9
}, 900);

$('#moving-4').delay(200).transition({
  top: 490,
  width: 1700,
  height: 800,
  left: 100,
  opacity: 0.2
}, 1000);

$('#moving-5').delay(1300).transition({
  top: 0,
  width: 1400,
  height: 900,
  left: 100,
  opacity: 0.3
}, 1600);

$('#moving-6').delay(1900).transition({
  top: 300,
  width: 600,
  height: 600,
  left: 600,
  opacity: 0.4
}, 300);

$('#moving-7').delay(500).transition({
  top: 0,
  width: 200,
  height: 800,
  left: 800,
  opacity: 0.4
}, 1200);

$('#moving-8').delay(1000).transition({
  top: 300,
  width: 600,
  height: 1200,
  left: 400,
  opacity: 0.9
}, 1400);

$('#moving-9').delay(2300).transition({
  top: 300,
  width: 100,
  height: 300,
  left: 800,
  opacity: 0.6
}, 900);

$('#moving-1').css({
  top: 0,
  width: 1200,
  height: 300,
  left: 200,
  opacity: 0.1,
  WebkitTransition: 'all   ',
  transition: 'all   ',
  'WebkitTransition-duration': '800ms',
  'transition-duration': '800ms'
});

$('#moving-2').css({
  top: 220,
  width: 1000,
  height: 100,
  left: 300,
  opacity: 0.3,
  WebkitTransition: 'all   ',
  transition: 'all   ',
  'WebkitTransition-duration': '600ms',
  'transition-duration': '600ms',

  'WebkitTransition-delay': '600ms',
  'transition-delay': '600ms'
});

$('#moving-3').css({
  top: 0,
  width: 800,
  height: 400,
  left: 500,
  opacity: 0.9,
  WebkitTransition: 'all   ',
  transition: 'all   ',
  'WebkitTransition-duration': '900ms',
  'transition-duration': '900ms',

  'WebkitTransition-delay': '1000ms',
  'transition-delay': '1000ms'
});

$('#moving-4').css({
  top: 490,
  width: 1700,
  height: 800,
  left: 100,
  opacity: 0.2,
  WebkitTransition: 'all   ',
  transition: 'all   ',
  'WebkitTransition-duration': '1000ms',
  'transition-duration': '1000ms',

  'WebkitTransition-delay': '200ms',
  'transition-delay': '200ms'
});

$('#moving-5').css({
  top: 0,
  width: 1400,
  height: 900,
  left: 100,
  opacity: 0.3,
  WebkitTransition: 'all   ',
  transition: 'all   ',
  'WebkitTransition-duration': '1600ms',
  'transition-duration': '1600ms',

  'WebkitTransition-delay': '1300ms',
  'transition-delay': '1300ms'
});

$('#moving-6').css({
  top: 300,
  width: 600,
  height: 600,
  left: 600,
  opacity: 0.4,
  WebkitTransition: 'all   ',
  transition: 'all   ',
  'WebkitTransition-duration': '300ms',
  'transition-duration': '300ms',

  'WebkitTransition-delay': '1900ms',
  'transition-delay': '1900ms'
});

$('#moving-7').css({
  top: 0,
  width: 200,
  height: 800,
  left: 800,
  opacity: 0.4,
  WebkitTransition: 'all   ',
  transition: 'all   ',
  'WebkitTransition-duration': '1200ms',
  'transition-duration': '1200ms',

  'WebkitTransition-delay': '500ms',
  'transition-delay': '500ms'
});

$('#moving-8').css({
  top: 300,
  width: 600,
  height: 1200,
  left: 400,
  opacity: 0.9,
  WebkitTransition: 'all   ',
  transition: 'all   ',
  'WebkitTransition-duration': '1400ms',
  'transition-duration': '1400ms',

  'WebkitTransition-delay': '1000ms',
  'transition-delay': '1000ms'
});

$('#moving-9').css({
  top: 300,
  width: 100,
  height: 300,
  left: 800,
  opacity: 0.6,
  WebkitTransition: 'all   ',
  transition: 'all   ',
  'WebkitTransition-duration': '900ms',
  'transition-duration': '900ms',

  'WebkitTransition-delay': '2300ms',
  'transition-delay': '2300ms'
});