css3_animation/examples/style.css
.bounce{
transition-property:left;
transition-timing-function:cubic-bezier(0.1,-0.6,0.2,0);
transition-duration:1s;
}
.bounce:hover{
left:200px;
}This timing function gives us a little bounce effect at the start, thanks to the
negative value for the first control point. The starting point is still at (0.0,
0.0), so we get a little bounce.If you want to learn more about making these curves, you can check out a
great script that shows examples and helps you see the coordinates:
http://www.netzgesta.de/dev/cubic-bezier-timing-function.html.Creating Our Transitions
When we select a field, we want the color to transition. To do that, we define
the transition properties on the form elements. Think of this as the beginning
of the transition. It tells the browser to watch these properties for changes,
and defines how they should be animated when they change.input[type="email"],input[type="password"]{
transition-timing-function:linear;
transition-property:background, border;
transition-duration:0.3s;
}This is the standard way to define transitions, but if you want things to work
in all of the browsers, you’ll need to define these transitions again using the
vendor prefixes like -webkit- and -moz- like we’ve done with other CSS properties.
That’s going to get a little lengthy. Thankfully there’s a shorthand notation
for this, which is the recommended way to define transitions:css3_animation/stylesheets/style.css
.logininput[type="email"], .login input[type="password"]{
-webkit-transition:background0.3slinear
border0.3slinear;
-moz-transition:background0.3slinear,
border0.3slinear;
-o-transition:background0.3slinear,
border0.3slinear;
transition:background0.3slinear,
border0.3slinear;
}Chapter 8. Eye Candy • 172
Download from Wow! eBook <www.wowebook.com> report erratum • discuss