Skip to main content
Workforce LibreTexts

1.1: Introduction to CSS Animation

  • Page ID
    \( \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}}\)

    Overall Learning Objectives for Chapter 1
    • Overview of the textbook
    • How to Use CodePen
    • Understanding Cartesian Coordinates

    Introduction to CSS Animation

    Welcome to the wonderful world of CSS Animations! In this textbook, we will be looking at manipulating HTML objects in 2D. These topics will be explored:

    • Transforms
    • Transitions and Eases
    • Keyframe Animations
    • Clip-paths and Shapes
    • Variables and SVG Graphics
    • Tools of the Trade
    • Using Greensock (a JavaScript Library) for Animations

    Before we begin the official journey on those topics, let's explore two concepts that will help you get the most out of this course: CodePen and Cartesian Coordinates. CodePen will be used to allow you to experiment with live code right here inside of our textbook. Cartesian Coordinates will be used to help us understand where to place our objects when we animate them.

    Let's get started!

    This page titled 1.1: Introduction to CSS Animation is shared under a CC BY-NC 4.0 license and was authored, remixed, and/or curated by Rosemary Barker.

    • Was this article helpful?