I would like to share with you a personal experience I had while trying to build advanced visual animations with CSS keyframes. The topic we’re going to address is animating several HTML elements simultaneously and taking advantage of keyframe flexibility. To explain this subject, we will create a simple fluid menu based on four squares. Clicking on one of them will display an overlay showing related content, closing the overlay will reverse the process showing the default menu. All delays will be managed directly with CSS — no javascript timeout() here.
The example described below is the first of four demos, all of which are using the same JS file, CSS class names, and are based on the same operating principles. All demos have been tested on Chrome, Safari, Firefox, Opera, IE11 and IE10 (also on iOS). They are not intended for production; they are simply provided as tangible case studies. Additionally, you may have to implement some fallbacks for users (especially those using old IE browsers), something beyond the scope of this article.
To improve readability, CSS rules used throughout this article are without vendor prefixes. Make sure you add prefixes accordingly (e.g. -webkit- and -moz-). Opera and IE10+ do not need older prefixes anymore. You can read official W3C documentation for more information about vendor prefixes.
CSS3 Animation Basics
Let’s start by going over some elementary concepts. CSS3 keyframes are powerful rules that let you control CSS styles of an element during a time scale. You can specify when a change will occur in percent where “0%” is the start of the animation and “100%” is the end. The keywords “from” and “to” are equivalent to “0%”” and “100%.” For compatibility reasons, make sure to always specify “0%” and “100%” values.