A library for CSS3 animations. The animations are more vibrant than most simple animations.
Clone or download
Latest commit 11397fa Feb 11, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Final touches Jul 25, 2015
dist Last animations Jul 24, 2015
font First animations Jul 21, 2015
images Last animations Jul 24, 2015
js Documentation and more animations Jul 22, 2015
.gitignore Initial commit Jul 20, 2015
LICENSE [update] license year Feb 10, 2018
README.md ReadME update Jul 25, 2015
documentation.html Final touches Jul 25, 2015
examples.html Final touches Jul 25, 2015
gruntfile.js First animations Jul 21, 2015
index.html Event Tracking GA Jul 25, 2015
package.json First animations Jul 21, 2015
wickedcss.css Final touches Jul 25, 2015



A library for CSS3 animations.

The animations include regular CSS3 animations to be used in all settings. Additionally, the library includes a number of wicked animations, which aren't applicable in all situations. They can be fun to play with.

For examples and documentation View Project Page.


To use the library, simply download and link to the file in your header.

<link rel="stylesheet" href="wickedcss.min.css"/>

Or the non-minified version.

<link rel="stylesheet" href="wickedcss.css"/>

Simply add the animation class to your element and it will perform your wicked animation.

<div class="barrelRoll"> Place your content here </div>

In this case, the contents of the div will perform the barrelRoll animation. All the classes can be found on the Project Page.

The classes can be applied to all elements including images.

<img src="images/mushroom.png" class="spinner"/>
  • floater
  • barrelRoll
  • rollerRight
  • rollerLeft
  • heartbeat
  • pulse
  • rotation
  • sideToSide
  • zoomer
  • zoomerOut
  • spinner
  • wiggle
  • shake
  • pound
  • slideUp
  • slideDown
  • slideRight
  • slideLeft
  • fadeIn
  • fadeOut
  • rotateInRight
  • rotateInLeft
  • rotateIn
  • bounceIn


Show on scroll

In order to show the animations on scroll, the library can be integrated with wow.js. The animation will fire when the element enters the screen. Remember to include jQuery before wow.js like so:

Jquery with local fallback:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>


<script src="js/wow.min.js"></script>
new WOW().init();

It can be used like this:

<div class="wow barrelRoll"> Content to Reveal Here </div>
Show on scroll - Alternative

The animation can alternatively be triggered at a specific position. In this example it will be triggered when the element is 450 pixels from the top of the screen.

    	$(window).scroll(function() {
    		var imagePos = $(this).offset().top;
    		var topOfWindow = $(window).scrollTop();
    			if (imagePos < topOfWindow+450) {