Zoom in Zoom Out Animation: CSS Fundamentals Mastery

Introduction

In this lab, we will explore CSS animations by creating a simple yet effective zoom in and zoom out effect. CSS animations allow us to add dynamic visual effects to web pages without using JavaScript. By the end of this lab, you will understand how to use CSS keyframes and animation properties to create smooth transitions that can enhance user experience on your websites.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/fonts("Fonts") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/DynamicStylingGroup -.-> css/animations("Animations") css/DynamicStylingGroup -.-> css/transformations("Transformations") subgraph Lab Skills css/selectors -.-> lab-35259{{"Zoom in Zoom Out Animation"}} css/fonts -.-> lab-35259{{"Zoom in Zoom Out Animation"}} css/box_model -.-> lab-35259{{"Zoom in Zoom Out Animation"}} css/width_and_height -.-> lab-35259{{"Zoom in Zoom Out Animation"}} css/backgrounds -.-> lab-35259{{"Zoom in Zoom Out Animation"}} css/animations -.-> lab-35259{{"Zoom in Zoom Out Animation"}} css/transformations -.-> lab-35259{{"Zoom in Zoom Out Animation"}} end

Understanding HTML Structure

Before we start creating our animation, we need to understand the HTML structure we will be working with. In this step, we will examine the provided HTML file and make any necessary modifications.

Open the index.html file in the editor.
If the file is empty or missing, create it with the following content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zoom In Zoom Out Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>CSS Animation Demo</h1>
    <p>This box demonstrates a zoom in zoom out animation:</p>

    <div class="zoom-in-out-box"></div>
  </body>
</html>

Let's understand what this HTML does:
- We have a standard HTML document structure with a title and viewport settings
- We link to an external CSS file named style.css
- We include a heading and paragraph to explain our demo
- Most importantly, we have a <div> element with class zoom-in-out-box that will be animated
Save the index.html file if you made any changes.

This div element will be our canvas for creating the animation. In the next step, we will style this element using CSS.

Basic CSS Styling

Now that we have our HTML structure in place, let's create the basic CSS styling for our animation element.

Open the style.css file in the editor.
If the file is empty or missing, create it with the following content:

body {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: #333;
}

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
}

Let's understand what this CSS does:
- We set some basic styling for the page (font, width, and margins)
- We style the heading with a dark gray color
- For our animation element .zoom-in-out-box, we:
  - Add a margin of 24px around it
  - Set its width and height to 50px
  - Give it a vibrant pink background color
Save the style.css file after making these changes.
To see your progress, click on the "Go Live" button in the bottom right corner of VSCode. This will start a web server on port 8080. Then refresh the Web 8080 tab to see your styled box.

You should now see a small pink square on your web page. This square is the element we will animate in the next steps.

Creating the Keyframes Animation

CSS animations work by defining keyframes that specify the styles an element should have at various points during the animation sequence. Let's create the keyframes for our zoom in zoom out animation.

Open the style.css file again and add the following code at the end:

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

Let's understand what this code does:
- @keyframes is a CSS at-rule that defines the stages and styles of an animation
- zoom-in-zoom-out is the name we give to our animation (we'll reference this name later)
- Inside the keyframes, we define what happens at different points in the animation:
  - At 0% (the start), the element is at its normal size with scale(1, 1)
  - At 50% (halfway through), the element grows to 1.5 times its size with scale(1.5, 1.5)
  - At 100% (the end), the element returns to its normal size
- The transform property with the scale() function changes the size of the element
Save the style.css file after adding these keyframes.

The keyframes define what our animation will do, but we haven't applied it to our element yet. In the next step, we'll connect the animation to our box.

Applying the Animation

Now that we have defined our keyframes, we need to apply the animation to our box element.

Open the style.css file again and modify the .zoom-in-out-box selector as follows:

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 1s ease infinite;
}

Let's understand the animation property we added:
- animation is a shorthand property that sets multiple animation properties at once
- zoom-in-zoom-out is the name of our keyframes animation
- 1s specifies that one cycle of the animation lasts 1 second
- ease is the timing function that makes the animation start slowly, speed up, and then slow down again
- infinite means the animation will repeat forever
Save the style.css file after making these changes.
If the web server is already running, simply refresh the Web 8080 tab. If not, click on "Go Live" in the bottom right corner to start the server, then open the Web 8080 tab.

You should now see your pink square smoothly zooming in and out in a continuous animation. The square grows larger until it reaches 1.5 times its original size, then shrinks back to normal. This cycle repeats infinitely.

Experimenting with Animation Properties

Let's customize our animation by experimenting with different animation properties. This will help you understand how these properties affect the animation behavior.

Open the style.css file and modify the .zoom-in-out-box selector to try different animation properties:

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 2s ease-in-out infinite;
  /* Add a slight rotation during the animation */
  border-radius: 10px;
}

Let's understand what we changed:
- We extended the animation duration to 2s (2 seconds)
- We changed the timing function to ease-in-out which makes both the beginning and end of the animation smooth
- We added a border-radius of 10px to make the corners of our box rounded
Let's also modify our keyframes to add a rotation effect:

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1) rotate(0deg);
  }
  50% {
    transform: scale(1.5, 1.5) rotate(45deg);
    background-color: #2196f3;
  }
  100% {
    transform: scale(1, 1) rotate(0deg);
  }
}

In this updated keyframes definition:
- We added a rotate() function to the transform property
- At the 50% mark, the element now rotates 45 degrees while scaling up
- We also change the background color to blue at the 50% mark
Save the style.css file after making these changes.
Refresh the Web 8080 tab to see your enhanced animation.

Your animation should now be slower (2 seconds per cycle), have rounded corners, rotate while zooming, and change color halfway through the animation. This demonstrates how CSS animations can combine multiple property changes for rich visual effects.

Feel free to experiment further with different properties and values to see how they affect your animation.

Summary

Congratulations on completing the Zoom in Zoom Out Animation lab! In this lab, you have learned:

How to structure HTML for a CSS animation
How to style elements using basic CSS properties
How to create keyframes animations that define the stages of an animation
How to apply animations to elements using the animation property
How to customize animations by adjusting timing, easing, and combining multiple property changes

These CSS animation techniques can be applied to create engaging user interfaces that respond to user interactions or draw attention to important elements on your web pages.

To continue your learning journey, consider exploring other animation properties like animation-delay, animation-direction, and animation-fill-mode. You can also experiment with animating different CSS properties beyond transform, such as opacity, position, and size.