Course Content

  • Lecture-38_animation1
  • Lecture-38_animation2

Course Content


An animation allows an element to transition from one style to another gradually. You can update as many CSS properties as you'd like, as often as you'd like. To use CSS animation, you must first define the animation's keyframes. Keyframes define the styles that an element will have at different points in time.

  • 12 tips for amazing CSS animation
  • Stick to the core four properties.
  • Introduce velocity.
  • Get the timing right.
  • Stop and start with animation-play-state.
  • Think about accessibility.
  • Chain your animations for impact.
  • Use will-change to boost performance.
  • Animate type with variable fonts.

Animation-name, animation-duration, and animation-timing-function are all shorthand properties for the animation property.

Keyframes are crucial frames that include information about an action's start and finish points. A keyframe informs you two things: first, it tells you what your frame's action is at a specific point in time, and second, it tells you when that action occurs.

CSS animations emit events, so you can use the animationend event to intervene when the animation ends. const element = document.

Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download LearnVern App

App Preview Image
App QR Code Image
Code Scan or Download the app
Google Play Store
Apple App Store
598K+ Downloads
App Download Section Circle 1
4.57 Avg. Ratings
App Download Section Circle 2
15K+ Reviews
App Download Section Circle 3
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere