From the course: Emmet: Fast and Efficient Web Coding
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Animation
- [Instructor] Like gradients, CSS animation properties are often long and involved and tend to need vendor prefixes. With Emmet, you can quickly create all of the vendor prefixes in one quick abbreviation. Let's look at how we can create an animation where our bee is going to fly across the screen like you see here. I'm starting with a page that simply has an a tag that wraps around an image tag. This is going to be our little bee that we're going to animate. I'll jump into the CSS file. At the top of the CSS file, I've included a bunch of abbreviations for animation-related properties. As you can see, there are a lot of Emmet snippets available for animation. Let's look at how we can incorporate this into our page. I'll start off by creating the keyframes. To do that, we're going to use @kf, and when we hit Tab, we'll get the vendor prefixes along with the final @keyframe declaration. We're going to need to change…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
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.