A library for CSS3 animations. The animations are more vibrant than most simple animations.
HTML CSS JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
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

README.md

wickedCSS

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.

Usage

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"/>
Classes
  • floater
  • barrelRoll
  • rollerRight
  • rollerLeft
  • heartbeat
  • pulse
  • rotation
  • sideToSide
  • zoomer
  • zoomerOut
  • spinner
  • wiggle
  • shake
  • pound
  • slideUp
  • slideDown
  • slideRight
  • slideLeft
  • fadeIn
  • fadeOut
  • rotateInRight
  • rotateInLeft
  • rotateIn
  • bounceIn

Customizations

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>

wow.js

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

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.

    <script>
    	$(window).scroll(function() {
    		$('#animatedElement').each(function(){
    		var imagePos = $(this).offset().top;
    
    		var topOfWindow = $(window).scrollTop();
    			if (imagePos < topOfWindow+450) {
    				$(this).addClass("barrelRoll");
    			}
    		});
    	});
    </script>