Lab 6 (Session 3) — CSS Positioning & Animation

Master CSS Position Property & Transitions (≈ 60 min)

Overview

This one-hour lab focuses on CSS positioning (static, relative, absolute, fixed, sticky) to control element placement and layering, and CSS transitions and transforms for smooth, engaging animations. Students will build an interactive analog clock using positioning, transforms, and CSS animations.

Duration: Approximately 60 minutes

Learning Objectives

By the end of this lab, students will be able to:

  • Understand and apply different CSS positioning values: static, relative, absolute, fixed, and sticky.
  • Use positioning properties (top, right, bottom, left) to precisely place elements.
  • Understand z-index and stacking context for layering elements.
  • Apply CSS transforms (rotate, translate, scale) for visual effects.
  • Create smooth animations using CSS transitions with timing functions.
  • Build an interactive analog clock using positioning and transforms.

Task 1 — Build an Analog Clock with CSS Positioning & Transitions

Create a Functional Analog Clock

Build a beautiful analog clock using CSS positioning, transforms, and transitions. This exercise demonstrates how position: absolute combined with transform-origin allows you to precisely position and rotate clock hands from a central pivot point. You'll create hour, minute, and second hands that rotate smoothly around the clock face.

Task 1: 📸 View Reference Picture

💡 Important Tip: Remember to refresh your browser (F5 or Cmd+R) after completing each step to see the CSS changes take effect!

Part A: Clock Container Setup

  1. Create .clock-container with position: relative; to establish positioning context for clock hands.
  2. For .clock-container, set width: 350px; and height: 350px; for the clock size.
  3. For .clock-container, add margin: 40px auto; to center the clock horizontally.
  4. For .clock-container, add background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); for gradient background.
  5. For .clock-container, add border-radius: 50%; to create a circular shape.
  6. For .clock-container, add box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.1); for depth.
  7. For .clock-container, add border: 10px solid white; for a clean border frame.

Part B: Clock Center Dot

  1. Create .clock-center with position: absolute; for absolute positioning.
  2. For .clock-center, set top: 50%; and left: 50%; to position at center.
  3. For .clock-center, add transform: translate(-50%, -50%); to center the dot perfectly.
  4. For .clock-center, set width: 20px; and height: 20px; for the center dot size.
  5. For .clock-center, add background: white; for visibility.
  6. For .clock-center, add border-radius: 50%; to make it circular.
  7. For .clock-center, add z-index: 10; to ensure it stays on top of clock hands.
  8. For .clock-center, add box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); for subtle depth.

Part C: Clock Hands Base Styling

  1. Create .clock-hand with position: absolute; for positioning hands.
  2. For .clock-hand, set bottom: 50%; to position hand starting from center.
  3. For .clock-hand, set left: 50%; to align hand at horizontal center.
  4. For .clock-hand, add transform-origin: center bottom; — this is crucial for rotation from the base.
  5. For .clock-hand, add background: white; for hand visibility.
  6. For .clock-hand, add border-radius: 4px 4px 0 0; for rounded top corners.
  7. For .clock-hand, add box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); for depth effect.

Part D: Individual Hand Styling

  1. Create .hour-hand with width: 8px; and height: 70px; for shorter, thicker hour hand.
  2. For .hour-hand, set transform: translateX(-50%) rotate(0deg); (starting at 12 o'clock position for demo).
  3. For .hour-hand, add background: rgba(255, 255, 255, 0.9); for slightly transparent white.
  4. For .hour-hand, add z-index: 3; to layer behind minute and second hands.
  5. Create .minute-hand with width: 6px; and height: 100px; for longer, thinner minute hand.
  6. For .minute-hand, set transform: translateX(-50%) rotate(90deg); (starting at 3 o'clock for demo).
  7. For .minute-hand, add background: rgba(255, 255, 255, 0.95); for nearly opaque white.
  8. For .minute-hand, add z-index: 4; to layer above hour hand.
  9. Create .second-hand with width: 3px; and height: 120px; for longest, thinnest second hand.
  10. For .second-hand, set transform: translateX(-50%) rotate(180deg); (starting at 6 o'clock for demo).
  11. For .second-hand, add background: #ef4444; for red accent color.
  12. For .second-hand, add z-index: 5; to layer above all other hands.

Part E: Adding Animations to Clock Hands

  1. For .hour-hand, add animation: rotate-hour-hand 120s linear infinite; to rotate continuously (demo speed: 2 minutes per rotation).
  2. For .minute-hand, add animation: rotate-minute-hand 10s linear infinite; to rotate faster (demo speed: 10 seconds per rotation).
  3. For .second-hand, add animation: rotate-second-hand 6s linear infinite; to rotate fastest (demo speed: 6 seconds per rotation).

Part F: Hour Markers (Optional Enhancement)

  1. Create .hour-marker with position: absolute; for positioning markers.
  2. For .hour-marker, set width: 4px; and height: 15px; for marker dimensions.
  3. For .hour-marker, add background: rgba(255, 255, 255, 0.6); for semi-transparent white.
  4. For .hour-marker, set top: 10px; and left: 50%; for positioning at 12 o'clock.
  5. For .hour-marker, add transform: translateX(-50%); to center the marker.
  6. For .hour-marker, add transform-origin: center 140px; to rotate around clock center.
  7. Use :nth-child selectors to rotate markers: .hour-marker:nth-child(2) { transform: translateX(-50%) rotate(30deg); }
  8. Continue for all 12 markers with 30-degree increments (60deg, 90deg, 120deg, etc.).

✨ Congratulations! You've built a working analog clock with CSS animations! Notice how the three @keyframes definitions at the top of Part D define the rotation animations that are applied to each clock hand.

Key Learning Points:

  • position: relative on the clock container creates a positioning context for absolutely positioned children.
  • position: absolute with top/left allows precise placement of clock hands.
  • transform-origin: center bottom makes clock hands rotate from their base (like real clock hands).
  • z-index controls the layering order (second hand on top, hour hand on bottom).
  • @keyframes define the animation from start to finish (0deg to 360deg rotation).
  • animation property applies the keyframes with duration, timing function, and iteration count.

Tip: In a real implementation, you would use JavaScript to set the rotation angles based on the current time. The transform: rotate() angles in this demo are static for demonstration purposes!

What to Submit

Upload the following to the BB:

  • index.html and styles.css
  • 1 screenshot showing your completed analog clock with moving hands