If used tastefully, CSS transitions and animations are a great way to spice up modern web sites. Today I learned about one of the pitfalls. It’s a subtle nuance, but once you know it you should be ready to pimp your site.
Transitions work mostly like you think they would. Here’s my general work flow:
- Pick a CSS property, or properties. There is a list Mozilla maintains of properties are animatable.
- Pick which timing function you want the transition to use. You’ll probably want either
ease
orlinear
. Pick how long you want the transition to take written with an
s
suffix meaning “seconds”.#kitty{ transition-property: width, height; transition-timing-function: ease; transition-duration: 1s; }
The Hiccup
All that seemed well and good, but I found one caveat. If you are animating width
for instance, you must make sure the element has a pre-defined width
before you animate it to something else, otherwise browsers can do some funky things. I’ll show you a bad example followed by a good one. I’m leaving out vendor prefixes for brevity. Tip: hover over the images to see the example. I hope you aren’t on a mobile device…
Wrong
img {
transition-property: width, height;
transition-timing-function: ease;
transition-duration: 1s;
}
img:hover {
width: 200px;
height: 200px;
}
In chrome, the effect is startling. The image disappears into a tiny dot before reappearing. Strange.
Right
img {
transition-property: width, height;
transition-timing-function: ease;
transition-duration: 1s;
width: 300px;
height: 300px;
}
img:hover {
width: 200px;
height: 200px;
}
The solution is to make sure you explicitly define a width
and height
before you change them.
Happy trails.