Jon Rumsey

An online markdown blog and knowledge repository.

Project maintained by nojronatron Hosted on GitHub Pages — Theme by mattgraham

CSS Animations

Notes taken while learning how to animate website elements using CSS.

MDN

Web Dev Simplified

Learn CSS Animation in 15 Minutes

Two ways to animate:

Transition property: Simple, easy to use, but not necessarily smooth.
Animation property: More complex, better multistep animation capabilities.

Transition Animation

Where to apply it?

Do not apply it on the :hover pseudo property.
Instead put it in the base class (className/ID) for the target element itself.

Transition shorhand => delay, duration, property, timing-function. Enter one or all of these in the shorthand Property entry, rather than typing out up to 4 lines of properties.

Smooth transition: transition: transform 1s; => Works on translateX() and other properties to smoothly transition between initial and ending "state".

timing function: Linear | ease-in-out |

Ease-in-out can be edited! Use the Inspect tool, find the timing function property, click on the function icon, and an editor appears with a bunch of built-in functions, and custom functions can be defined using the visual editing tool!

Animation Syntax

Minimal short-hand to get animation to work:

Use the word animation
Set a custom name so it can be referenced.
Specify a duration.
Specify a timing function (ease-in, etc).

Keyframes are needed to set steps:

keyword @keyframes
Give it a custom name so it can be referenced.
Within the braces include the how far into the animation the transform (or other property) should be executed.

Note: Once keyframes is done, the element resets back to it's originally set values.

Advice

VSCode provides help so slow down while developing CSS properties and use those intellisense prompts to help find the correct sub-properties, and settings.

Return to conted-index.md