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

Overview

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.