CSS: Animation

Focused View

Val Head

1:43:07

0 View

[1] Introduction

[1] CSS animation advantages.mp4

01:05

[2] 1. Overview of CSS Transitions and Transforms

[1] CSS transform basics.mp4

04:41

[2] Simple 3D transforms.mp4

04:12

[3] CSS transitions.mp4

04:41

[4] Challenge Adding a transition.mp4

00:27

[5] Solution Adding a transition.mp4

00:45

[3] 2. Understanding CSS Animations

[1] CSS keyframe animation fundamentals.mp4

03:55

[2] animation-delay and animation-fill-mode.mp4

02:20

[3] A closer look at animation-fill-mode.mp4

02:34

[4] animation-direction.mp4

03:18

[5] Timing functions and easing.mp4

07:48

[6] The steps() timing function.mp4

04:44

[7] Challenge Adding keyframes to an animation.mp4

00:39

[8] Solution Adding keyframes to an animation.mp4

00:58

[4] 3. CSS Animation Building Blocks

[1] Infinitely looping animations.mp4

03:58

[2] Pause and play with animation-play-state.mp4

03:16

[3] Animating 3D transforms.mp4

05:24

[4] Chaining multiple keyframe animations.mp4

04:48

[5] Challenge Adding a third animation to the chain.mp4

00:33

[6] Solution Adding a third animation to the chain.mp4

02:16

[5] 4. Animating SVGs with CSS

[1] Preparing an SVG for animation.mp4

02:56

[2] SVG exporting and optimization settings.mp4

05:15

[3] Animating SVG with CSS.mp4

05:39

[6] 5. Animating SVGs with CSS

[1] Creating a motion path for CSS with offset-path.mp4

02:36

[2] Animating CSS motion path with offset-path.mp4

03:30

[3] Dynamic CSS animation with CSS variables.mp4

09:02

[4] Animating variable fonts with CSS.mp4

05:18

[7] 6. Tools for Creating CSS Animations

[1] Using browser animation inspection tools.mp4

04:25

[8] Conclusion

[1] Helpful online tools for CSS.mp4

02:04

Description

In recent years, web animation has grown into a powerful option for enhancing user experience on the web, and CSS animation has become a core skill for web designers and developers. In this course, Val Head leads you through the CSS animation skills you need to bring motion into your interactive projects. Val introduces CSS transforms and transitions—the foundation of most CSS animations—and shows how to keyframe simple animations and adjust their timing, fill-mode, and direction. She also covers looping and chaining animations, animating HTML and SVG elements, optimizing animation performance, best uses for CSS animations right now, and the current level of support and performance and how we can expect that to change in the future. Val presents the lessons as a short series of building block animations—common things you might want to do with animations—then puts those techniques together in a small project of an animated infographic so you can see them all in action.

This course is integrated with GitHub Codespaces, an instant cloud developer environment that offers all the functionality of your favorite IDE without the need for any local machine setup. With Codespaces, you can get hands-on practice from any machine, at any time—all while using a tool that you’ll likely encounter in the workplace. Check out the “Using GitHub Codespaces with this course” video to learn how to get started.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

CSS

CSS Animations

Val Head

Instructor's Courses

Linkedin Learning

View courses Linkedin Learning

LinkedIn Learning is an American online learning provider. It provides video courses taught by industry experts in software, creative, and business skills. It is a subsidiary of LinkedIn. All the courses on LinkedIn fall into four categories: Business, Creative, Technology and Certifications. It was founded in 1995 by Lynda Weinman as Lynda.com before being acquired by LinkedIn in 2015. Microsoft acquired LinkedIn in December 2016.