CSS or JQuery for animation

Question

CSS or JQuery for animation

Navigation

#1 by (10 votes)
#2 by (6 votes)

8

When it comes to animation, which one should I use? Which is the lightest? Is it possible to do the same animations in either one?

javascript css

asked by anonymous 21.02.2015 / 19:29

2 answers

6

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

21.02.2015 / 19:38

How to show the youngest age between 3 ages with Javascript? What is the difference between static and dynamic linking?

score 10 · Accepted Answer

CSS3 is always lighter.

However you may face more complex situations where a simple structure of animation or transition will not be as useful.

In most cases it is possible to merge jQuery / JavaScript with CSS3 classes (simple animation or 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 does a toggle (with JS) of the animated class with CSS3 animation. It would be perfectly possible to do the same with just jQuery, but would be a bit heavier !

See another example where, for our purpose, you can only 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><divid="div1"><span></span>-free Recipes</div>

In the above example, the jQuery script transitions texts (in array) into an element. Each transition takes the time determined at the first index of each array within the parent array.

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

Summarizing : You should use CSS3 whenever possible, when it is not, merge with jQuery / Javascript and if it does not merge, use jQuery.