Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

CSS: Animation

via LinkedIn Learning

Write review

Overview

Build a Learning Habit
Download Class Central's free printable study calendar
Download for Free
Learn how to create simple CSS animations such as rollover buttons, 3D transforms, animated graphics and logos, load screens, and more.

Syllabus

Introduction
  • CSS animation advantages
  • Using GitHub Codespaces with this course
1. Overview of CSS Transitions and Transforms
  • CSS transform basics
  • Simple 3D transforms
  • CSS transitions
  • Challenge: Adding a transition
  • Solution: Adding a transition
2. Understanding CSS Animations
  • CSS keyframe animation fundamentals
  • animation-delay and animation-fill-mode
  • A closer look at animation-fill-mode
  • animation-direction
  • Timing functions and easing
  • The steps() timing function
  • Challenge: Adding keyframes to an animation
  • Solution: Adding keyframes to an animation
3. CSS Animation Building Blocks
  • Infinitely looping animations
  • Pause and play with animation-play-state
  • Animating 3D transforms
  • Chaining multiple keyframe animations
  • Challenge: Adding a third animation to the chain
  • Solution: Adding a third animation to the chain
4. Animating SVGs with CSS
  • Preparing an SVG for animation
  • SVG exporting and optimization settings
  • Animating SVG with CSS
5. Advanced CSS Animation Techniques
  • Creating a motion path for CSS with offset-path
  • Animating CSS motion path with offset-path
  • Dynamic CSS animation with CSS variables
  • Animating variable fonts with CSS
6. Tools for Creating CSS Animations
  • Using browser animation inspection tools
Conclusion
  • Helpful online tools for CSS

Taught by

Val Head

Reviews

4.7 rating at LinkedIn Learning based on 135 ratings

Start your review of CSS: Animation

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.