CSS Free Section Starter Challenge 30 min

5. Smooth Micro-Interactions & @keyframes

Overview: Create fluid, GPU-accelerated CSS animations using @keyframes, transform: scale(), and animation duration.

Concept & Syntax Guide

CSS keyframes let you interpolate between multiple style states without JavaScript. Combining `transform` with `@keyframes` ensures smooth 60fps animations that do not trigger costly layout repaints.

Hands-On Practice Exercise

Animate a Pulsing VIP Badge

Define an animation named `pulse` that scales the element from `scale(1)` at 0% to `scale(1.15)` at 50% and back to `scale(1)` at 100%. Apply it to `.vip-badge` with infinite loop.

Target Output: VIP MEMBER

Need a hint? Click here to reveal

Hint: Check syntax carefully and make sure your code contains: VIP MEMBER

CSS Code Editor

1
2
3
4
5
6
7
8
9
10

<style>
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
  }
  .vip-badge {
    display: inline-block;
    padding: 10px 20px;
    background: #82b440;
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    animation: pulse 2s infinite ease-in-out;
  }
</style>
<div class="preview-box">
  <span class="vip-badge">VIP MEMBER</span>
</div>