From the course: CSS: Animation
Join today to access over 24,400 courses taught by industry experts.
Dynamic CSS animation with CSS variables - CSS Tutorial
From the course: CSS: Animation
Dynamic CSS animation with CSS variables
- [Instructor] CSS custom properties, otherwise known as CSS variables, make it possible to create key frames that are more dynamic and flexible. In the earlier days of web animation, one drawback of CSS key frame animation was the fact that you couldn't change or alter the key frames once they were written. CSS variables change all of that. In short, CSS variables allow you to define and reuse your own custom values within your CSS. There are a number of things that make CSS variables different than, say, preprocessor variables that you might've used before. But three things that really stand out are the fact that they can be changed at runtime, they follow the CSS cascade, and they can be easily accessed by JavaScript. When it comes to animation, we can use CSS variables both in our key frame definitions and when we're assigning animation properties to individual elements. So there's a lot of potential for…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
