From the course: Learning App Building with Vanilla JavaScript
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Animation with vanilla JavaScript - JavaScript Tutorial
From the course: Learning App Building with Vanilla JavaScript
Animation with vanilla JavaScript
- After DOM manipulation, simple animations are probably what jQuery is most often used for. The library includes methods for simply showing and hiding elements, as well as for fading in and out and for sliding up and down as they're revealed or hidden. For simple effects like these, re-creating jQuery's scripted behavior requires just a single line of vanilla JavaScript along with a bit of CSS. You can use a CSS transition, which is a feature that enables you to animate one or more of an element's CSS properties over a given duration. This means that in addition to simply toggling an element's display property to show or hide the element, you could fade it in by transitioning the display property over a number of milliseconds, or you could slide it up or down or left or right by transitioning other properties, such as top, left, height, or width. Even if your needs go beyond simple transitions, CSS supports more complex animations through the @keyframes at-rule. You can use…
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.