Animating CSS

Introduction

CSS is such a powerful tool that we can use it to make properties animated. We can animate the color, position, and even the shape of a CSS element. This gives us the ability to make our site more dynamic by just adding and removing CSS classes.

CSS Properties For Animation

Three somewhat overlapping CSS concepts allow us to animate the display of existing elements with CSS:

• transform is a CSS property that instantly changes the values of other CSS properties by changing the size, position, or orientation of the element being drawn.
• transition specifies a CSS property and a duration. When the specified property changes, the change happens gradually over the specified duration of time, rather than instantaneously.
• animation is a more general form of a transition that allows us to specify multiple stopping points between the start and end value as well as more complex timing and repeating behavior.