3.1: CSS Transitions - Creating Motion on the HTML Page
- Page ID
- 26430
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
CSS Transitions - Creating Motion on the HTML Page
Ahhhh, transitions! This is where we get into seeing some real motion on our HTML pages by animating over time. Transitions and keyframes, which come a little later, really start making the animations come alive.
Transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately.1
The syntax for transitions is as follows:1
transition: property | duration | timing-function | delay;
Let's look at all the values to the right of transition to see what they mean.
Property
The property value of a transition is the name of the CSS property that you want to animate over time. This would be something like opacity, color, or 'all.' Here is a complete list of properties that can be animated.
The property value of a transition is the name of the CSS property that you want to animate over time.1
Mozilla keeps an updated list of all of the possible animatable CSS properties. Be sure to go check out their page.
Duration
This is how long you want the animation to take to finish. This is typically denoted in seconds (i.e., 2s).1
How long it takes for the animation to finish.
Timing-function
The timing function has to do with making an animation look more organic...more like what you would see in nature. In animation, we use ideas from how real-world objects act.
A rock that rolls down a hill takes a little time to pick up speed...until it comes to a dead stop after hitting a tree. So, you could say that the motion of the rock eases in at the beginning (starts slowly), goes fast during the central part of its motion, and then stops suddenly.
In traditional animations, ease defines the starting and stopping motion of an animation.
Eases need a bit more explanation because there is a lot to them. Let's look at these items next.
The timing-function has to do with the style of the animation. This is where easing comes into play.
Delay
The amount of time that the animation should wait before it starts to move.
The delay is the pause that the animation has before it begins.
Footnotes
1. “Using CSS Transitions - CSS: Cascading Style Sheets: MDN.” CSS: Cascading Style Sheets | MDN, MDN Web Docs, https://developer.mozilla.org/en-US/...SS_transitions.