:::: MENU ::::

Native jQuery animations using pure JavaScript and CSS3

jQuery shipped with some basic animations like,

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

css3_animation

Some Basics of CSS animations

Keyframes

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

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

Alternatively you could run animation with shorthand technique.

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

With jQuery you can implement it as follow.

Or

With CSS you need to use animations.

Using it practically – Calling css fadeout on button click event

 

JavaScript

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:-

Or

 

CSS 3 Way:-

HTML

JavaScript

Demo

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

jQuery Way:-

CSS3 Way:-

JavaScript

Demo –

 

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

jQuery Way:-

CSS3 Way:-

JavaScript

Demo –

 

See all animations to gather – http://jsfiddle.net/vikaskbh/PXAC6/
Even more animations – http://jsfiddle.net/vikaskbh/ksgwf/7/

Share and Enjoy

  • DZone
  • Google Plus
  • LinkedIn
  • Twitter
  • Facebook
  • Email