Course Content

  • Lecture-39_keyframe

Course Content


By specifying styles for keyframes (or waypoints) along the animation sequence, the @keyframes CSS at-rule regulates the intermediate phases in a CSS animation sequence. This allows you greater control over the animation sequence's intermediate steps than transitions.

@keyframes is a specialised CSS at-rule that specifies keyframes. A keyframe style rule's keyframe selector begins with a percentage (%) or the keywords from (same as 0%) or to (same as 0%). (same as 100 percent ). The selector is used to indicate where a keyframe will be built during the animation's duration.

A keyframe is a point in time when you provide a value like spatial position, opacity, or audio volume. Set at least two keyframes—one for the value at the start of the change and another for the value at the end of the change—to make a change in a property over time.

In film, the frame rate is commonly 24 frames per second. In two minutes, (24 x 60 x 2) = 2,880 frames.

  • Keyframes can be set or added.
  • To activate it, click the Stopwatch symbol next to the property name. For that property value, After Effects creates a keyframe at the current time.
  • Select Animation > Add [x] Keyframe, where [x] represents the name of the property you want to animate.

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