CSS vs animations vs transit (v4)

Revision 4 of this benchmark created by Andy on

Description

I guess this test doesn't work as intended because the 4th test isn't waiting for the animation to end, which makes it look quicker than it probably is.

Preparation HTML

<style>
body {

}

#moving-1 {
        width: 150px;
        height: 80px;
        background-color: #e8f2f4;
        border: 2px solid #999;
        top: 0px;
        left: 0px;
        position: absolute;
}

.moving-1-animated {
        top: 0px !important;
        width: 1200px !important;
        height: 300px !important;
        left: 200px !important;
        opacity: 0.1 !important;
        transition: all 0.8s linear;
        -webkit-transition: all 0.8s linear;
}

#moving-2 {
        width: 130px;
        height: 80px;
        background-color: #eee4c9;
        border: 2px solid #999;
        top: 100px;
        left: 0px;
        position: absolute;
}

.moving-2-animated {
        top: 220px !important;
        width: 1000px !important;
        height: 100px!important;
        left: 300px !important;
        opacity: 0.3 !important;
        transition: all 0.6s linear;
        -webkit-transition: all 0.6s linear;
        animation-delay:0.6s;
        webkit-animation-delay:0.6s;
}

#moving-3 {
        width: 170px;
        height: 80px;
        background-color: #edc9ee;
        border: 2px solid #999;
        top: 200px;
        left: 0px;
        position: absolute;
}

.moving-3-animated {
        top: 0px !important;
        width: 800px !important;
        height: 400px !important;
        left: 500px !important;
        opacity: 0.9 !important;
        transition: all 0.9s linear;
        -webkit-transition: all 0.9s linear;
                animation-delay:1s;
        webkit-animation-delay:1s;
}

#moving-4 {
        width: 150px;
        height: 80px;
        background-color: #d3eec9;
        border: 2px solid #999;
        top: 300px;
        left: 0px;
        position: absolute;
}

.moving-4-animated {
        top: 490px !important;
        width: 1700px !important;
        height: 800px !important;
        left: 100px !important;
        opacity: 0.2 !important;
        transition: all 1.0s linear;
        -webkit-transition: all 1.0s linear;
                animation-delay:0.2s;
        webkit-animation-delay:0.2s;
}

#moving-5 {
        width: 100px;
        height: 80px;
        background-color: #eec9d2;
        border: 2px solid #999;
        top: 400px;
        left: 0px;
        position: absolute;
}

.moving-5-animated {
        top: 0px !important;
        width: 1400px !important;
        height: 900px !important;
        left: 100px !important;
        opacity: 0.3 !important;
        transition: all 1.6s linear;
        -webkit-transition: all 1.6s linear;
                animation-delay:1.3s;
        webkit-animation-delay:1.3s;
}

#moving-6 {
        width: 140px;
        height: 80px;
        background-color: #daeec9;
        border: 2px solid #999;
        top: 500px;
        left: 0px;
        position: absolute;
}

.moving-6-animated {
        top: 300px !important;
        width: 600px !important;
        height: 600px !important;
        left: 600px !important;
        opacity: 0.4 !important;
        transition: all 0.3s linear;
        -webkit-transition: all 0.3s linear;
                animation-delay:1.9s;
        webkit-animation-delay:1.9s;
}

#moving-7 {
        width: 150px;
        height: 80px;
        background-color: #c9eeee;
        border: 2px solid #999;
        top: 600px;
        left: 0px;
        position: absolute;
}

.moving-7-animated {
        top: 0px !important;
        width: 200px !important;
        height: 800px !important;
        left: 800px !important;
        opacity: 0.4 !important;
        transition: all 1.2s linear;
        -webkit-transition: all 1.2s linear;
                animation-delay:0.5s;
        webkit-animation-delay:0.5s;
}

#moving-8 {
        width: 170px;
        height: 80px;
        background-color: #dcc9ee;
        border: 2px solid #999;
        top: 700px;
        left: 0px;
        position: absolute;
}

.moving-8-animated {
        top: 300px !important;
        width: 600px !important;
        height: 1200px !important;
        left: 400px !important;
        opacity: 0.9 !important;
        transition: all 1.4s linear;
        -webkit-transition: all 1.4s linear;
                animation-delay:1s;
        webkit-animation-delay:1s;
}

#moving-9 {
        width: 120px;
        height: 80px;
        background-color: #e3eec9;
        border: 2px solid #999;
        top: 800px;
        left: 0px;
        position: absolute;
}

.moving-9-animated {
        top: 300px !important;
        width: 100px !important;
        height: 300px !important;
        left: 800px !important;
        opacity: 0.6 !important;
        transition: all 0.9s linear;
        -webkit-transition: all 0.9s linear;
        animation-delay:2.3s;
        webkit-animation-delay:2.3s;
}
</style>

  <div id="moving-1" class="moving"></div>
        <div id="moving-2" class="moving"></div>
        <div id="moving-3" class="moving"></div>
        <div id="moving-4" class="moving"></div>
        <div id="moving-5" class="moving"></div>
        <div id="moving-6" class="moving"></div>
        <div id="moving-7" class="moving"></div>
        <div id="moving-8" class="moving"></div>
        <div id="moving-9" class="moving"></div>
        

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>

Teardown


    document.getElementById('moving-1').classList.remove('moving-1-animated');
    document.getElementById('moving-2').classList.remove('moving-2-animated');
    document.getElementById('moving-3').classList.remove('moving-3-animated');
    document.getElementById('moving-4').classList.remove('moving-4-animated');
    document.getElementById('moving-5').classList.remove('moving-5-animated');
    document.getElementById('moving-6').classList.remove('moving-6-animated');
    document.getElementById('moving-7').classList.remove('moving-7-animated');
    document.getElementById('moving-8').classList.remove('moving-8-animated');
    document.getElementById('moving-9').classList.remove('moving-9-animated');
    
    $('#moving-1').css({
      top: 0,
      width: 0,
      height: 0,
      left: 0,
      opacity: 0.0,
      WebkitTransition: 'all   ',
      transition: 'all   ',
      'WebkitTransition-duration': '0ms',
      'transition-duration': '0ms',
    
      'WebkitTransition-delay': '0ms',
      'transition-delay': '0ms'
    });
    
    $('#moving-2').css({
      top: 0,
      width: 0,
      height: 0,
      left: 0,
      opacity: 0.0,
      WebkitTransition: 'all   ',
      transition: 'all   ',
      'WebkitTransition-duration': '0ms',
      'transition-duration': '0ms',
    
      'WebkitTransition-delay': '0ms',
      'transition-delay': '0ms'
    });
    
    $('#moving-3').css({
      top: 0,
      width: 0,
      height: 0,
      left: 0,
      opacity: 0.0,
      WebkitTransition: 'all   ',
      transition: 'all   ',
      'WebkitTransition-duration': '0ms',
      'transition-duration': '0ms',
    
      'WebkitTransition-delay': '0ms',
      'transition-delay': '0ms'
    });
    
    $('#moving-4').css({
      top: 0,
      width: 0,
      height: 0,
      left: 0,
      opacity: 0.0,
      WebkitTransition: 'all   ',
      transition: 'all   ',
      'WebkitTransition-duration': '0ms',
      'transition-duration': '0ms',
    
      'WebkitTransition-delay': '0ms',
      'transition-delay': '0ms'
    });
    
    $('#moving-5').css({
      top: 0,
      width: 0,
      height: 0,
      left: 0,
      opacity: 0.0,
      WebkitTransition: 'all   ',
      transition: 'all   ',
      'WebkitTransition-duration': '0ms',
      'transition-duration': '0ms',
    
      'WebkitTransition-delay': '0ms',
      'transition-delay': '0ms'
    });
    
    $('#moving-6').css({
      top: 0,
      width: 0,
      height: 0,
      left: 0,
      opacity: 0.0,
      WebkitTransition: 'all   ',
      transition: 'all   ',
      'WebkitTransition-duration': '0ms',
      'transition-duration': '0ms',
    
      'WebkitTransition-delay': '0ms',
      'transition-delay': '0ms'
    });
    
    $('#moving-7').css({
      top: 0,
      width: 0,
      height: 0,
      left: 0,
      opacity: 0.0,
      WebkitTransition: 'all   ',
      transition: 'all   ',
      'WebkitTransition-duration': '0ms',
      'transition-duration': '0ms',
    
      'WebkitTransition-delay': '0ms',
      'transition-delay': '0ms'
    });
    
    $('#moving-8').css({
      top: 0,
      width: 0,
      height: 0,
      left: 0,
      opacity: 0.0,
      WebkitTransition: 'all   ',
      transition: 'all   ',
      'WebkitTransition-duration': '0ms',
      'transition-duration': '0ms',
    
      'WebkitTransition-delay': '0ms',
      'transition-delay': '0ms'
    });
    
    $('#moving-9').css({
      top: 0,
      width: 0,
      height: 0,
      left: 0,
      opacity: 0.0,
      WebkitTransition: 'all   ',
      transition: 'all   ',
      'WebkitTransition-duration': '0ms',
      'transition-duration': '0ms',
    
      'WebkitTransition-delay': '0ms',
      'transition-delay': '0ms'
    });

Test runner

Ready to run.

Testing in
TestOps/sec
animate
$('#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);
ready
transit
$('#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);
ready
css
$('#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'
});
ready
Vanilla + CSS
//if anyone can fix the onTransitionEnd listener a message on twitter would be appreciated
/*var ended = 0;
//normalizing onTransitionEnd
var els = document.getElementsByClassName('moving');
for (var i = 0; i < els.length; i++) {
 els[i].addEventListener('webkitTransitionEnd', function(event) { transitionEnded(event);}, false);
 els[i].addEventListener('oTransitionEnd', function(event) { transitionEnded(event);}, false);
 els[i].addEventListener('transitionend', function(event) { transitionEnded(event);}, false);
}

function transitionEnded(event) {
 console.log('transitionEnded ' + ended);
 console.log('event.target ' + event.target.id);
 if(++ended >= els.length) {
  console.log('Never called');
  deferred.resolve();
  ended = 0;
 }
}*/
 
document.getElementById('moving-1').classList.add('moving-1-animated');
document.getElementById('moving-2').classList.add('moving-2-animated');
document.getElementById('moving-3').classList.add('moving-3-animated');
document.getElementById('moving-4').classList.add('moving-4-animated');
document.getElementById('moving-5').classList.add('moving-5-animated');
document.getElementById('moving-6').classList.add('moving-6-animated');
document.getElementById('moving-7').classList.add('moving-7-animated');
document.getElementById('moving-8').classList.add('moving-8-animated');
document.getElementById('moving-9').classList.add('moving-9-animated');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.