This shorthand transition property lets us supply the CSS property to transition,
the duration, and the timing function. We can specify multiple properties,
durations, and timing functions by separating them with commas.And of course, if you want to support older versions of Firefox and Opera,
you’ll need to define them again with the -moz- and -o- prefixes, respectively.
For brevity, we’ll leave those out.We’ve defined the transitions, and so when we add effects using :focus, like this:css3_animation/stylesheets/style.css
.logininput[type="email"]:focus,.logininput[type="password"]:focus{
background-color:#ffe;
border:1px solid#0e0;
}the browser transitions the background and the border smoothly.
Transitions provide a simple way to animate CSS properties from one value
to another, but they’re not the only way to make animations.Making the Box Shake with CSS Animations
Transitions are great when we need to move from one point to another, or
transition a property from one state to the next. But creating a shake or
rumble effect, where the region shakes from side to side, requires something
more powerful. With CSS Animations,^9 we can define keyframes of animation.
A shake is nothing more than moving the box to the left and to the right a
few times.Let’s define the shake animation. In stylesheets/style.css, we define the keyframes
like this, using @keyframes:css3_animation/stylesheets/style.css
@keyframesshake{
0%{left:0;}
20%{left:-2%;}
40%{left:2%;}
60%{left:-2%;}
80%{left:2%;}
100%{left:0;}
}This is the standard, and works on Internet Explorer 10 and the most recent
versions of Firefox and Chrome. But if you want Safari to work, you need to
define the keyframes again using a browser prefix, just like with transitions.report erratum • discussMaking Things Move with Transitions and Animations • 173
Download from Wow! eBook <www.wowebook.com>