CSS: Animation
Offered By: LinkedIn Learning
Course Description
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
- CSS transform basics
- Simple 3D transforms
- CSS transitions
- Challenge: Adding a transition
- Solution: Adding a transition
- 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
- 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
- Preparing an SVG for animation
- SVG exporting and optimization settings
- Animating SVG with CSS
- 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
- Using browser animation inspection tools
- Helpful online tools for CSS
Taught by
Val Head
Related Courses
Intro to HTML and CSSUdacity Responsive Web Design Fundamentals
Google via Udacity HTML5 and CSS Fundamentals
World Wide Web Consortium (W3C) via edX CSS Basics
Microsoft via edX Advanced CSS Concepts
Microsoft via edX