post: CSS3 Transitions: FadeTo - Extending Animate.css

Home

CSS3 Transitions: FadeTo – Extending Animate.css

Working With CSS

  

Tutorials

CSS CSS Transitions CSS3 Javascript jQuery

Animate.css is a fantastic tool for adding CSS3 transitions to your site. It gives them a creative edge with a bit of a wow factor.

It comes, of course, at the additional cost of loading an extra css file, which is quite chunky at 71kb, and 55kb minified. However you don’t have to add the full file. Each transition type is well documented. By removing all the unnecessary bloat of transitions you’ll not be using, or starting with a fresh file with the core .animated style, and adding the transitions you need then you can dramatically reduce the overall footprint.

For example, in this example I’ve used a css file fade.css which contains just the fade components. It comes in at 9kb and 7kb minified. Much more lightweight.

It would be nice if someone created a nice little animate.css generator, which would create a smaller css file just based on the transitions required, which are invariably grouped into like transitions, such as fade, flip, bounce etc. One can hope.

Implementing Animate

Adding animate.css or fade.css to your website is straightforward. Place the files in a css folder at the web root level of your site, and then include one of them in the head section of the page:


<link rel='stylesheet' id='animate-css'  href='http://xxx/animate.css' type='text/css' />
or
<link rel='stylesheet' id='fade-css'  href='http://xxx/fade.css' type='text/css' />

Animate In WordPress

Adding to your WordPress site is also fairly easy. Place your files in a css folder within your theme i.e. where your index.php and functions.php files are, and then add the code below to your theme functions.php file. Replace animate.css for fade.css in the code if you’re using the lighter version.


// Load css styles 
function my_styles() { 
   wp_register_style( 'animate', get_stylesheet_directory_uri() . '/css/animate.css', NULL, NULL); 
   wp_enqueue_style( 'animate' ); 
}

add_action('wp_enqueue_scripts', 'my_styles'); 

Binding The Transition

Binding the transition to a tag is straightforward, for example the heading above has ‘class=”animated fadeInLeftBig”‘. Of course any transition added to a selector will only activate on page load. To bind the same transition to a selector for use on events such as hover and click requires some javascript functionality, most simply actioned using jQuery.

Bind To An Event

For example, binding the fadeOut animation to the heading above is straightforward. The heading has an id of ‘fadeout’. The following jQuery code added to the page, or to your themes main js file will activate the animation when the header is clicked.


// Animate example
$('#fadeout').on('click', function() {
    $(this).addClass('animated fadeOut');
});

$('#fadeout').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    $(this).removeClass('animated fadeOut');
});

You will notice that the header returns after it has faded out. This is done by the second code block, which essentially monitors the animation event and triggers the function once the animation has ended. This is browser vendor specific, hence the long sequence of attributes. What this sequence does is to add the animated and fadeOut class to the header when chicked, triggering the opacity animation. Once the animation has completed the classes are removed and the element reverts to its default styling.

There’s lots more information on the main github page.

There’s a lot of possibilities. Invariably you will only scratch the surface with your own site. It’s also a very good as a learning tool for understanding the basics of CSS3 transitions, and thereby gaining knowledge on how to create your own transitions as required.

Of course it doesn’t do everything, but loaded with the knowledge from above you can add your own transition. In this case we’re adding a subtle partial fade out of an image on hover. Something similar can bee seen on the blog list on my home page.

Extending Amimated: fadeTo

We’re adding a transition that fades from opacity: 1 to opacity:0.8 on hover and reverts back to opacity:1.


//Custom fadeTo
@-webkit-keyframes fadeTo {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.8;
  }
}

@keyframes fadeTo {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.8;
  }
}

.fadeTo {
  -webkit-animation-name: fadeTo;
  animation-name: fadeTo;
}

The javascript to trigger the hover event. Add to your page, or theme js file as previously.


$('#fadeto').hover(function() {
    $(this).addClass('animated fadeTo');
}, function() {
    $(this).removeClass('animated fadeTo');
});

Alternative syntax


$('#fadeto').mouseover(function() {
    $(this).addClass('animated fadeTo');
})
.mouseout(function() {
    $(this).removeClass('animated fadeTo');
});

The html to test the animation.


<div id="fadeto" style="width:100px; height:100px; background-color:#222;opacity:1;">FadeToTest</div>

And the example.

FadeToTest

Notice that we’re not waiting for the animation to end, but simply adding and removing the animation classes when hovering over the div and leaving it. Using other animation settings such as duration can tidy it up somewhat.

Hopefully this gives you a bit of insight into animate.css, how it works, and how it can be extended.

comments powered by Disqus