Skip to main content
Workforce LibreTexts

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}}\)

    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 property

    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.

    Definition: Property

    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

    Definition: Duration

    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.

    Definition: Timing-function

    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.

    Definition: Delay

    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.


    This page titled 3.1: CSS Transitions - Creating Motion on the HTML Page is shared under a CC BY-NC 4.0 license and was authored, remixed, and/or curated by Rosemary Barker.