⚽ Section 03. Lesson 1 Keyframes + Restart Controller

📝 Summary of What You Will Do in This Section

In this section, your main goal is to learn your first CSS animation deeply. You will build a bounce animation using @keyframes and apply it with the animation property in lesson-01-keyframes-basics.html. This is the core skill for this project, and everything else in this section is here to help you see and test that motion clearly.

You will also create js/main.js, but think of that JavaScript as helper code, not the main lesson. Its job is to make the Restart animation button work so you can replay your CSS animation as many times as you need while learning.

✅ Checklist of What You Need to Do

  • Create lesson-01-keyframes-basics.html in your project root.
  • Type the full Lesson 1 HTML file, including the <style> animation block.
  • Focus on the @keyframes bounce and .lesson1 .ball.replay animation rule so you understand how the motion is created.
  • Create js/main.js in your project root js folder.
  • Type the full JavaScript controller code into js/main.js.
  • You do not need to master every JavaScript line in this section; use it as a helper to replay CSS animation while your main focus stays on CSS motion.
  • Verify the page links to both css/styles.css and js/main.js.
  • Check that clicking Restart animation restarts the bouncing ball.

🧠 Core Concepts

The most important concept in this section is how CSS animation is built in two parts. First, @keyframes bounce defines the motion path over time: start at normal position, move upward, then return to the start. Second, the animation is attached to an element with the animation shorthand in .lesson1 .ball.replay. That rule controls the animation name, duration, easing style, and number of loops. If students understand these two pieces, they understand the foundation of CSS animation.

It also helps to understand why this animation is placed inside the lesson page’s <style> block. This project uses one shared stylesheet for site-wide visual design, and lesson-level <style> blocks for the animation concepts being taught in that specific lesson. That separation keeps animation learning focused and organized. The HTML structure in this section gives your animation a clear stage, a target element (.ball), and a button to test the result.

JavaScript in this section is support code for your CSS learning. It does not create the animation itself. Instead, it helps you restart the animation on command by toggling the .replay class. This makes practice easier because you can replay the same CSS motion repeatedly and observe it carefully.

💻 Code You Will Write in This Section

HTML (lesson-01-keyframes-basics.html)

Create lesson-01-keyframes-basics.html in your project root and type the full file below. This file includes both HTML structure and Section 03 CSS animation code inside a <style> block.

You are adding the full Lesson 1 page now. In Section 04, you will create lesson-02-easing-and-steps.html and compare timing functions.

Code image: s03-HTML

JavaScript (js/main.js)

Create js/main.js and type this full file by hand. This is a helper control file for multiple lessons, not the core learning target of this project.

You are adding this file now in Section 03. In later sections, you will keep reusing this same helper file instead of rewriting control logic on every lesson page. If some JavaScript feels advanced, that is okay.

Code image: s03-JS

🔍 Key Concepts

In lesson-01-keyframes-basics.html, the animation lesson starts inside the <style> block. The @keyframes bounce rule is your timeline: at 0% the ball is at rest, at 50% it moves up with translateY(-60px), and at 100% it returns to its original position. These percentage points are called keyframes because they mark key moments in the motion. This is the heart of what students should focus on in this section.

The selector .lesson1 .ball.replay is where the animation gets applied. The animation shorthand combines multiple animation settings in one line: name (bounce), duration (1.2s), easing (ease-in-out), and iteration count (1). This line is important because it teaches how motion is attached to a real element, not just defined in theory. The HTML then provides the target element (<div class="ball replay" data-anim-target></div>) inside a demo stage so students can clearly see the result.

The JavaScript file js/main.js is only a helper for this lesson. It listens for the restart button and toggles the .replay class so your CSS animation can run again from the beginning. The animation itself is still designed and controlled in CSS, so CSS remains the main skill to learn here.