Native jQuery animations using pure JavaScript and CSS3

jQuery shipped with some basic animations like,

• fadeOut
• fadeIn
• slideDown
• slideUp

If you want to implement it absolutely without jQuery, you could implement it using CSS3 and pure javaScript.

Some Basics of CSS animations

Keyframes

Keyframes are units of timeline of animation. Where, you could specify the state of the animation.

@keyframes "animationName" {
  from{
    height:100px;
  } to{
    height:200px;
  }
}

In above example keyframe are defining the animation it should increase the height of element by end of transition.

• animation-duration – Specify running time of the animation
• animation-timing-function – (ease, ease-in, ease-in-out, linear) Specify how animation will run.
• animation-iteration-count – (number, infinite) How many times do you want to run animation. You could loop animation by assigning infinite value to animation-iteration-count property.
• animation-name: To run animation you need to specify in dynamic classes. Dynamic class means css pseudo selectors (:hover,:active,:focus etc) you can also refer to classes assigned using javascript dynamically.

i.e

.animation_class{
  animation-name: animationName;
}

document.getElementById(‘element_id’).className = "animation_class";

Alternatively you could run animation with shorthand technique.

.animation_class{
  animation: animation-name 1s ease delaytime infinite forward;
}

[1] jQuery fadeout animation with CSS3 and pure javascript.

With jQuery you can implement it as follow.

$(element).fadeOut();

Or

$(element).animate({
"opacity":"0"
},"slow");

With CSS you need to use animations.

@keyframes "fadeout" {
  from {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
  }
  to {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
  }
}
.fadeout {
  animation: fadeout 1s ease 0s 1 forwards;
}

Using it practically – Calling css fadeout on button click event

<input type="button" value="Fade Out" onclick="fadeOut('#box')">
<hr/>
<div id="box"></div>

JavaScript

function fadeOut(find){
  element = document.querySelector(find);
  element.className = "box animate";
  resetClass(element);
  addClass(element,"fadeout");
}

function resetClass(el) {
  var class_to_remove = ['slideup','slidedown','facein','fadeout'];
  var each_class = el.className.split(" ");
  newclass = [];
  for (i=0 ; i < each_class.length ; i++) {
    if(class_to_remove.indexOf(each_class[i]) >= 0){
      continue;
    }
    newclass.push(each_class[i]);
  }
  el.className = newclass.join(" ");
}

function addClass(el,cl){
el.className = el.className + " " + cl;
}

User clicks on fadeout button, native javascript (non-jquery) code will add fadeout class to box div.

Demo –

[2] jQuery fadeIn animation with CSS3 and pure JavaScript.

Now we already created some reusable code above, so directly re-use here.

jQuery Way:-

$(element).fadeIn();

Or

CSS 3 Way:-

@keyframes "fadein" {
  from {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
  }

  to {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
  }

}

HTML

<input type="button" value="Fade In" onclick="fadeIn('#box')">
<hr/>
<div id="box"></div>

JavaScript

function fadeIn(find){
  element = document.querySelector(find);
  element.style.display="block";
  element.className = "box animate";
  resetClass(element);
  addClass(element,"fadein");
}

Demo

[3] jQuery SlideUp animation with CSS3 and pure JavaScript.

jQuery Way:-

$(element).SlideUp();

CSS3 Way:-

@keyframes "slideup" {
  from {
    height: 100px;
  }
  to {
    height: 0;
  }
}

JavaScript

function slideUp(find){
  element = document.querySelector(find);
  element.className = "box animate";
  resetClass(element);
  addClass(element,"slideup");
}

Demo –

[4] jQuery SlideDown animation with CSS3 and pure JavaScript.

jQuery Way:-

$(element).slideDown();

CSS3 Way:-

@-moz-keyframes slidedown {
  from {
    height: 0;
  }
  to {
    height: 100px;
  }
}

JavaScript

function slideDown(find){
  element = document.querySelector(find);
  element.style.display="block";
  element.className = "box animate";
  resetClass(element);
  addClass(element,"slidedown");
}

Demo –