when you can use
So How Do You Animate with CSS?
There are basically two ways to animate properties in CSS: transition and transform.
Not all CSS properties are animatable. See this list for animatable properties.
Animating a property with CSS is fairly straight-forward.
Take the animatable property:
opacity. We can animate the
opacity on an image overlay so that when we hover over it with the mouse, the opacity of the overlay will decrease on the image. You can do that with something like this:
Here, we are selecting the
overlay class, and adding a base property to that class. Inside of the class selection, we set the
0 and add the transition with
transition-property which selects the property you want to animate and
transition-duration which tells the browser how long the animation lasts.
Once you hover over the image, the opacity will be set to
2, and when you switch off of it, it will go back down to
0 since we told the browser by the first CSS declaration we needed to have the opacity return to
0 once the hover state was over.
Not Too Bad, Right?
It is fairly simple, once you get the hang of it. I will be posting more about CSS transitions as I learn them. Meanwhile, here is nice little table of animatable properties by Lea Verou that animate when you hover over them.