Adding Animations

Animations

Animations are, in my opinion, the “dragons” of CSS to beware of. Once you go beyond basic animations (e.g., object moving from point A to point B, object fading in and out, etc.), you’ll almost certainly write some code you feel is suboptimal – either in the performance it delivers or in the implementation itself.

That being said, animations are treated as first-class functionalities in CSS. We have @keyframes to define how we want things to be at certain stages of the animation. If by chance, you’re coming from a Flash background, this will feel very familiar.

Let’s take a look at how we can use it to add the following animations

• When the tooltip shows up, it doesn’t seem to appear out of thin air. There’s a very subtle “bubble out” effect.
• When the tooltip moves from one highlighted area to another, without having gone away in between, it creates a sliding effect.

$$$$

Popup Animation