Transitions and Animations in CSS: Adding Motion with CSS

Transitions and Animations in CSS: Adding Motion with CSS

Estelle Weyl

Language: English

Pages: 118

ISBN: 149192988X

Format: PDF / Kindle (mobi) / ePub


Add life and depth to your web applications and improve user experience through the discrete use of CSS transitions and animations. With this concise guide, you’ll learn how to make page elements move or change in appearance, whether you want to realistically bounce a ball, gradually expand a drop-down menu, or simply bring attention to an element when users hover over it.

Short and deep, this book is an excerpt from the upcoming fourth edition of CSS: The Definitive Guide. When you purchase either the print or the ebook edition of Transitions and Animations in CSS, you’ll receive a discount on the entire Definitive Guide once it’s released. Why wait? Learn how to make your web pages come alive today.

  • Understand and learn how to implement Disney’s 12 principles of cartoon animation
  • Learn which CSS properties you can animate and use in transitions
  • Apply CSS’s four transition properties and nine animation properties to your CSS elements
  • Use CSS keyframe animations to granularly control an element’s property values
  • Learn details that will save you hours of debugging and megabytes of unnecessary JavaScript

PHP & MySQL: The Missing Manual

A Web for Everyone: Designing Accessible User Experiences (1st Edition)

Vaadin 7 Cookbook

RESTful Web APIs

A Developers Guide to the Semantic Web

HTML5 Video How-to

 

 

 

 

 

 

 

 

 

 

 

 

step-end, steps(n, start)—where n is the number of steps—steps(n, end), and cubic-bezier(x1, y1, x2, y2). These values are also the valid values for the animation-timing-function and are described in great detail in Chapter 3. The non-step keyword are easing timing functions employing cubic Bézier mathematical functions to provide smooth curves. The specification provides for five predefined easing functions, but you can describe your own precise timing function by defining your own

interpolatable values. There are some property values that can animate if the browser can infer implicit values. For example, shadows. For shadows, the browser will infer an implicit shadow box-shadow: transparent 0 0 0 or box-shadow: inset transparent 0 0 0, replacing any values not explicitly included in the pre- or post-transition state. These examples are in the chapter files for this book. Only the interpolatable values lead to transitionend events. As noted previously, visibility

Appeal on the Web includes an easy-to-read design, clear drawing, and motion that will capture and involve the visitor’s interest. The animation has to appeal to the mind as well as to the eye. There’s a nice video explaining the 12 principles of animation at https://vimeo.com/93206523, and a nice display of all of the principles can be found at The Illusion of Life. Animation and Transition Considerations Flash animation, animated banner ads, and Geocities animated GIFs from 1996 have given

change more gradually, bringing attention to what is occurring. For example, you may want to make a card game more realistic by taking 200 milliseconds to animate the flipping of a card 3, as the user may not realize what happened if there is no animation. As another example, you may want your site’s drop-down menus to expand or become visible over 200 milliseconds (instead of instantly) which may be jarring. With CSS transitions, you can make a drop-down menu appear slowly. In Figure 2-1, we

different values in the pre and post states. In the case of all, there will be at least 21 transitionend events: one for each of the longhand values making up the 8 properties we know are included in the pre and post states, and possibly from others that are inherited or declared in other style blocks impacting the element: document.querySelector('div').addEventListener('transitionend', function (e) { console.log(e.propertyName); }); The transitionend event includes three event specific

Download sample

Download