🎚 Section 04. Lesson 2 Timing Functions

📝 Summary of What You Will Do in This Section

In this section, your main goal is to understand how CSS timing functions change the feel of motion. You will create lesson-02-easing-and-steps.html and compare three timing styles: ease-in-out, linear, and steps(5, end). The movement path stays the same, but the speed behavior changes, which helps you learn how timing choices affect animation mood and clarity.

By the end of this section, you will be able to look at one animation and explain why it feels smooth, constant, or jumpy. You will still include the shared js/main.js file, but only as a helper so the Restart buttons work. The learning target is CSS animation timing, not JavaScript.

✅ Checklist of What You Need to Do

  • Create lesson-02-easing-and-steps.html in your project root.
  • Type the full lesson file by hand, including the <style> block.
  • Focus on how each class changes the animation-timing-function value.
  • Keep the same @keyframes slide motion path for all three demos.
  • Make sure css/styles.css and js/main.js are linked in the <head>.
  • Test each Restart button and compare how each timing function feels.
  • Keep JavaScript in helper mode; no new JavaScript code is required in this section.

🧠 Core Concepts

This lesson teaches a key animation idea: the path of motion and the speed of motion are different things. Your @keyframes slide rule defines the path, which is moving from left to right. Your animation-timing-function controls how fast that movement happens over time. That means two animations can follow the same path but still feel very different depending on timing.

When you use ease-in-out, the animation starts slower, speeds up in the middle, then slows down at the end. This often feels natural and smooth. With linear, the animation moves at a constant speed from start to finish. With steps(5, end), movement happens in visible jumps instead of a smooth glide. This is useful for frame-like motion, pixel-art effects, or when you want movement to look intentionally segmented.

You are also practicing controlled comparison. Each demo uses the same keyframes, duration, loop count, direction, and fill mode. The only thing that changes is timing function. This is an important learning strategy because it helps you isolate one variable and really understand what that one property does.

💻 Code You Will Write in This Section

HTML + CSS (lesson-02-easing-and-steps.html)

Create lesson-02-easing-and-steps.html in your project root and type the full file below by hand.

You are adding the entire Lesson 2 page in this section. In Section 05, you will create lesson-03-iterations-direction-fill.html and focus on loops, direction, and fill-mode behavior.

Code image: s04-HTML

🔍 Key Concepts

Inside the <style> block, the first important line is @keyframes slide. It gives you one shared motion path from translateX(-120px) to translateX(120px). After that, each demo-specific selector (.ease-demo .box.replay, .linear-demo .box.replay, and .steps-demo .box.replay) applies the same animation setup but changes only the timing function. That is the central teaching pattern in this section.

Look closely at the animation shorthand values. In each rule, you set the name (slide), duration (1.4s), timing function, iteration count (2), direction (alternate), and fill mode (both). Because all of those settings are the same except timing function, students can feel exactly what ease-in-out, linear, and steps(5, end) each contribute to motion.

In the HTML demo structure, each section has the same restart button and data-anim-target setup used in Lesson 1. That repeated structure is intentional. It keeps your page architecture predictable so your brain can spend more attention on CSS motion decisions instead of new layout patterns. JavaScript remains a helper that restarts each demo, while CSS remains the source of animation behavior.