Classanimation

While researching on what's the better approach for animation in banners I really like the idea of using browser ready/GPU accelerated graphics.   I started adding @keyframes animations as way to use animation in banners.  However the more I got into animations the more I learnt about animations and transitions.  It wasn't until I attended Rachel Nabors workshop Web Animation Essentials: CSS Animations and Transitions that I started looking to Transitions in a whole new way (hint: they are not only for :hover).  This approach of animating using transitions rather than animations is a nice compromise between a pure CSS3 Animations and JS only JavaScript animation (like GSAP or Velocity.js).

This approach which I like to call Classanimation requires that you affect the className attribute of the element (either by pure JS, jQuery addClass/removeClass methods or other lightweight solutions like Todd Motto functions).

The main idea behind Classanimation is that an element has different states (an state is defined as visual changes in CSS).  The transition will be responsible for doing the tweening of the properties between states.  Through JavaScript and the setTimeout() function you'll change the state (in a parent element or even in the actual element). For the following example I'm using my own mini library fla.js (included in the pen) to switch classes:

See the Pen classanimation 2 by Emmanuel Ulloa Arguello (@emmanuelulloa) on CodePen.