CSS or Jquery for animation

Question

When it comes to animation, which one should I use? Which one is the lightest? It is possible to do the same animations both in one and the other?

Answer 1

CSS3 is always lighter.

However you may face more complex situations where a simple structure of animation or transition won’t be as useful.

In most cases it is possible to merge jQuery/Javascript with CSS3 classes (Animation or simple Transitions).

Example of using JS + CSS3 keyframes;

document.getElementById('element').addEventListener('click', function() {
  this.classList.toggle('bounceIn');
}, false);

#element {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 

@-webkit-keyframes bounceIn { 
    0% { 
        opacity: 0; 
        -webkit-transform: scale(.3); 
    } 

    50% { 
        opacity: 1; 
        -webkit-transform: scale(1.05); 
    } 

    70% { 
        -webkit-transform: scale(.9); 
    } 

    100% { 
         -webkit-transform: scale(1); 
    } 
} 

@keyframes bounceIn { 
    0% { 
        opacity: 0; 
        transform: scale(.3); 
    } 

    50% { 
        opacity: 1; 
        transform: scale(1.05); 
    } 

    70% { 
        transform: scale(.9); 
    } 

    100% { 
        transform: scale(1); 
    } 
} 

.bounceIn { 
    -webkit-animation-name: bounceIn; 
    animation-name: bounceIn; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.1/animate.min.css" rel="stylesheet"/>
<div id="element" class="animated" >clique aqui</div>

The above script just makes one toggle (with JS) animated class with CSS3 Animation. It would be perfectly possible to do the same only with jQuery, but would be somewhat heavier!

See another example where, for our goal, it is only possible to use jQuery

$(document).ready(function() {
  var items = [["Two",2000], ["Three",3000], ["Four",4000], ["Five",5000], ["Six",6000], ["One",1000]];
  var $text = $('#div1 span');

  function loop(index) {
    $text.html(items[index][0]);
    $text.fadeIn();
    $text.delay(items[index][1]).fadeOut(function(){
        if(index < (items.length - 1)){
            loop(++index);
        }
        else loop(0);
    });
  }

  loop(0);
});

#div1{float:left;padding:20px;margin-top:40px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"><span></span>-free Recipes</div>

In the above example the jQuery script transitions text(in array) within an element. Each transition lasts the given time in the first index of each array within the parent array.

This is only possible thanks to the callback of the method fadeOut() where the function calls itself at each iteration.

In short: you should use CSS3 whenever possible, when it is not, Intercale with jQuery/Javascript and if it is not possible to parse use jQuery.

Answer 2

The lightest is an animation using only CSS, but in some cases it is necessary to use Javascript to control the behavior of Animation and this adds an additional cost in the execution of its animation, because basically your Script will dynamically manipulate the element’s Tyles.