HTML and CSS Reference
In-Depth Information
-webkit-transition
:
color 400ms ease-in
;
-moz-transition
:
color 400ms ease-in
;
transition
:
color 400ms ease-in
;
}
Here, we've added a
CSS3 transition
to both the image and the title, which will make for a
10
smooth color change animation.
Unfortunately, CSS3 transitions are not currently supported in IE9. However, even in
unsupported browsers, the color change will still occur—it just won't have a smooth animation.
If complete cross-browser support for the animation is important, you could always provide a
jQuery version of the animation for unsupported browsers. Bear in mind, though, that jQuery's
animate()
method
does not support color animations, so you'll need to use a
color plug-in
.
11
12
Putting all the CSS together:
.post-wrapper
{
position
:
relative
;
padding-left
:
240px
;
}
.post-image
{
position
:
absolute
;
top
:
0
;
left
:
0
;
background-color
:
#bbb
;
-webkit-transition
:
background-color 400ms ease-in
;
-moz-transition
:
background-color 400ms ease-in
;
transition
:
background-color 400ms ease-in
;
}
.post-title
{
color
:
#037072
;
-webkit-transition
:
color 400ms ease-in
;
-moz-transition
:
color 400ms ease-in
;
transition
:
color 400ms ease-in
;
