CHAPTER 1 DESIGN PATTERNS: MAKING CSS EASY!Transitions, Animations, and 2D Transformations
The CSS Transitions spec allows property changes in CSS values to occur smoothly over a specified
duration. Normally when the value of a CSS property changes, the rendered result is instantly updated,
but with CSS Transitions, the author has the ability to animate smoothly from the old state to the new
state over time.
Here is an example:
#box {
transition-property: opacity, left;
transition-duration: 3s, 5s;
}
The foregoing code will cause the opacity property to transition over a period of three seconds and
the left property to transition over a period of five seconds.
CSS Animations are similar to transitions in that they change the presentational value of CSS
properties over time. The key difference is that while transitions trigger implicitly when property values
change, animations are explicitly executed when the animation properties are applied. Because of this,
animations require explicit values for the properties being animated. These values are specified using
keyframes.
The author can specify how many times the animation iterates, whether it alternates between the
begin and end values, whether the animation should be running or paused, etc.
Here is an example:
#warning {
animation-name: 'horizontal-slide';
animation-duration: 5s;
animation-iteration-count: 10;
}
@keyframes 'horizontal-slide' {
from {
left: 0;
}
to {
left: 100px;
}
}
This will produce an animation that moves #warning horizontally for 100px over five seconds and
repeats itself nine times for a total of ten iterations.
The CSS 2D Transforms spec allows elements rendered by CSS to be transformed in two-
dimensional space. Here is an example:
#box {
height: 100px; width: 100px;
transform: translate(50px, 50px) scale(1.5, 1.5) rotate(90deg);
}
The foregoing example moves #box by 50 pixels in both the X and Y directions, scales the element by
150%, and then rotates it 90 degrees clockwise about the z axis.