Animating CSS
Animate the show/hide button with CSS in this lesson.
We'll cover the following
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.
Get hands-on with 1200+ tech skills courses.