CSS Animation Effects

Part 1. CSS Transitions

Modern Web sites cannot be imagined without some sort of UI effects. Fading, smooth transitions, rotations and color switching make a Web page more appealing and induce the user to pay more attention to the page contents. As for online presentations and games, animation effects are indispensable for that kind of Web applications.

Animation-related functionality is provided by the following mechanisms:

• native script-based animations based on the window animation timing interface;
• animation APIs implemented in third-parties' JavaScript libraries, e.g. in jQuery or script.aculo.us;
• declarative animations expressed in SVG markup; as an alternative, JavaScript libraries for SVG allow the developer to create fancy effects without declaring them in the markup;
• the nascent Web Animations API which is gradually being implemented in main browsers;
• CSS Transitions altering the values of CSS properties over a given duration;
• frame-by-frame CSS Animations.

CSS Transitions can be regarded as an instance of the tweened animation: a transition performs a series of simple changes applied to the value of a CSS property. The example below creates a "sunset" effect: one of CSS filters makes the background image of a <div> element less bright. The scene is getting darker steadily: CSS transition properties are changing the filter from 100% to 30% over a period of 12 seconds.

CSS properties
div {
 width: 600px; height: 394px;
 background-image: url(landscape.png);
 background-position: 50% 50%;
 background-repeat: no-repeat;
 transition-property: -webkit-filter; // CSS filters are animatable
 transition-delay: 0s;
 transition-duration: 12s;
 transition-timing-function: linear;
}

markup
<div></div>

starting transition from script
setTimeout(
 function(){ // timer-based callback
  document.querySelector("div").style.webkitFilter="brightness(30%)";
 },
 1000 // transition will start in a second
);

The transition-delay and transition-duration properties can be expressed in seconds (s) or milliseconds (ms). If no value is assigned to delay, the specified transition effect will start immediately. A negative value for duration is interpreted as 0s.

The transition-property designates the CSS property that will undergo transformation. The list of animatable properties depends on the browser. The transition-timing-function describes the progress of a transition effect over one cycle of its duration. Supported functions are

• ease (equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0));
• ease-in (equivalent to cubic-bezier(0.42, 0, 1.0, 1.0));
• ease-in-out (equivalent to cubic-bezier(0.42, 0, 0.58, 1.0));
• ease-out (equivalent to cubic-bezier(0, 0, 0.58, 1.0));
• linear (equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0));
• steps accepting the number of intervals and the start or end keywords as its parameters;
• step-start (equivalent to steps(1, start));
• step-end (equivalent to steps(1, end));
• cubic-bezier (x1, y1, x2, y2); x1 and y1 are coordinate values of the first point of the curve, x2 and y2 define the second point; valid x values must be in the range [0, 1].

There's also a shorthand property that can be employed instead of transition-property transition-duration transition-timing-function transition-delay. This is the transition property which could be used in the example above as

transition: -webkit-filter 12s linear 0s;

sunset effect