English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 1h 43m | 300 MB
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.
Table of Contents
Introduction
1 CSS animation advantages
1. Overview of CSS Transitions and Transforms
2 CSS transform basics
3 Simple 3D transforms
4 CSS transitions
5 Challenge Adding a transition
6 Solution Adding a transition
2. Understanding CSS Animations
7 CSS keyframe animation fundamentals
8 animation-delay and animation-fill-mode
9 A closer look at animation-fill-mode
10 animation-direction
11 Timing functions and easing
12 The steps() timing function
13 Challenge Adding keyframes to an animation
14 Solution Adding keyframes to an animation
3. CSS Animation Building Blocks
15 Infinitely looping animations
16 Pause and play with animation-play-state
17 Animating 3D transforms
18 Chaining multiple keyframe animations
19 Challenge Adding a third animation to the chain
20 Solution Adding a third animation to the chain
4. Animating SVGs with CSS
21 Preparing an SVG for animation
22 SVG exporting and optimization settings
23 Animating SVG with CSS
5. Animating SVGs with CSS
24 Creating a motion path for CSS with offset-path
25 Animating CSS motion path with offset-path
26 Dynamic CSS animation with CSS variables
27 Animating variable fonts with CSS
6. Tools for Creating CSS Animations
28 Using browser animation inspection tools
Conclusion
29 Helpful online tools for CSS
Resolve the captcha to access the links!