MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
During boring lectures in school, have you ever drawn a stick figure cricket batsman in the bottom corner of your textbook?
0%): The batsman raises his bat.30%): The bowler releases the ball.60%): The bat strikes the ball with a loud crack!100%): The ball flies over the boundary ropes for a massive six!When you hold the textbook edges and flip the pages rapidly with your thumb, the individual still drawings magically blend into a continuous, moving cartoon movie!
+-------------------------------------------------------------------------+
| THE FLIPBOOK OF CSS KEYFRAME ANIMATION |
| |
| Transition vs Animation: |
| * Transition: Needs a trigger (like hover) to morph from A to B. |
| * Animation: Starts automatically, visits 10 different waypoints, |
| and can loop infinitely forever! |
| |
| @keyframes swingBat { |
| 0% { transform: rotate(0deg); } |
| 50% { transform: rotate(-45deg); } <--- Intermediate Waypoints! |
| 100% { transform: rotate(90deg); } |
| } |
+-------------------------------------------------------------------------+While transitions are great for simple two-state hover shifts, CSS Animations with @keyframes give you director-level control over complex, multi-stage, continuous choreographies. In this tutorial, you will master keyframe syntax, infinite loops, and vital accessibility best practices.
@keyframes RuleBefore an element can animate, you must write the animation script using the @keyframes at-rule, followed by an animation name:
Once your keyframe script is defined, attach it to your target HTML element using the animation properties:
In production, we write all parameters in one clean declaration:
animation-fill-modeHave you ever created an entrance animation where an element slides into view, but as soon as the animation ends, it snaps back to its original position or disappears?
That happens because of animation-fill-mode!
forwards!prefers-reduced-motionNot all users enjoy spinning logos or bouncing cards. For people with vestibular motion disorders, spinning animations can cause dizziness, nausea, and headaches.
Modern operating systems (Windows, macOS, iOS, Android) have a setting called "Reduce Motion". You must always respect this setting in professional web design:
This single 8-line snippet ensures that users who requested reduced motion get instant, calm transitions without motion sickness!
| Bad Practice (Don't) | Good Practice (Do) | Why? |
|---|---|---|
Forgetting animation-fill-mode: forwards on entrance animations | Add forwards to entrance keyframes | Prevents elements from abruptly popping back to invisible or displaced states. |
Animating width, height, or margin in continuous loops | Strictly animate transform and opacity | Non-GPU properties trigger heavy continuous layout recalculations that drain phone batteries. |
| Making crucial content rely on an infinite animation to be readable | Use subtle ambient indicators (like live status pulses) | Constant vigorous movement distracts users from reading core content. |
Ignoring the prefers-reduced-motion accessibility standard | Provide static fallbacks for motion-sensitive users | Ensures WCAG 2.1 AA accessibility compliance for enterprise websites. |
@keyframes name { ... }: Defines the animation blueprint using percentages (0%, 50%, 100%).animation-iteration-count: infinite: Keeps the animation cycling forever without stopping (great for spinners and tickers).animation-direction: alternate: Bounces the animation back and forth (0% $\to$ 100% $\to$ 0%).animation-fill-mode: forwards: Locks the element into its final keyframe state after the animation finishes.prefers-reduced-motion: Accessible media query to mute or neutralize animations for users with motion sensitivity.animation-iteration-count makes an animation loop continuously without ever stopping?Build an animated School Admission Status component:
transform: scale() and opacity with animation-iteration-count: infinite.@media (prefers-reduced-motion: reduce).Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Test your understanding of this lesson with 5 questions. Each question has one correct answer.