HTML-CSS: Zoom in zoom out animation

Last update on March 08 2024 13:35:15 (UTC/GMT +8 hours)

HTML-CSS : Exercise-45 with Solution

Using HTML, CSS creates a zoom in zoom out animation.

Use @keyframes to define a three-step animation. At the start (0%) and end (100%), the element is its original size (scale(1 ,1)). Halfway through (50%) it's scaled up to 1.5 times its original size (scale(1.5, 1.5)).
Use width and height to give the element a specific size.
Use animation to set the appropriate values for the element to make it animated.

HTML Code:

<!--License: https://bit.ly/3GjrtVF-->
<!DOCTYPE html>
<html>
<head>
<!-- Set character encoding to UTF-8 -->
<meta charset="utf-8">
<!-- Ensure proper rendering on various devices by setting viewport width -->
<meta name="viewport" content="width=device-width">
<!-- Title of the webpage -->
<title>Using HTML, CSS creates a zoom in zoom out animation</title>
</head>
<body>
<!-- Div element with a class for zoom in zoom out animation -->
<div class="zoom-in-out-box">w3r</div>
</body>
</html>

Explanation:

The HTML document starts with standard declaration tags including <!DOCTYPE html> which declares the document type and <html> which signifies the start of the HTML document.
Inside the <head> section:

<meta charset="utf-8"> sets the character encoding to UTF-8, ensuring proper interpretation of characters.
<meta name="viewport" content="width=device-width"> sets the viewport width to the width of the device, ensuring proper scaling on different devices.
<title>...</title> sets the title of the webpage which appears in the browser's title bar or tab.

The <body> section contains the content of the webpage.
<div class="zoom-in-out-box">w3r</div> defines a div element with a class attribute set to "zoom-in-out-box". This div will be used for the zoom in zoom out animation.

CSS Code:

/* CSS styles */
<style>
/* Style for zoom in zoom out animation */
.zoom-in-out-box {
  /* Set margin around the element */
  margin: 24px;
  /* Set width of the element */
  width: 50px;
  /* Set height of the element */
  height: 50px;
  /* Set background color of the element */
  background: #f500cc;
  /* Apply animation named 'zoom-in-zoom-out' with duration of 1 second, easing effect, and infinite repetition */
  animation: zoom-in-zoom-out 1s ease infinite;
}

/* Keyframes for the zoom in zoom out animation */
@keyframes zoom-in-zoom-out {
  /* At the beginning of the animation */
  0% {
    /* Scale the element to its original size */
    transform: scale(1, 1);
  }
  /* At the middle of the animation */
  50% {
    /* Scale the element to 1.5 times its original size */
    transform: scale(1.5, 1.5);
  }
  /* At the end of the animation */
  100% {
    /* Scale the element back to its original size */
    transform: scale(1, 1);
  }
}
</style>

Explanation:

.zoom-in-out-box class:

margin: 24px;: Sets a margin of 24 pixels around the element.
width: 50px; height: 50px;: Sets the width and height of the element to 50 pixels, creating a square shape.
background: #f500cc;: Sets the background color of the element to a shade of pink.
animation: zoom-in-zoom-out 1s ease infinite;: Applies the animation named 'zoom-in-zoom-out' with a duration of 1 second, easing effect, and infinite repetition.

@keyframes zoom-in-zoom-out:

0%: At the beginning of the animation, the element is at its original size.
50%: At the middle of the animation, the element is scaled to 1.5 times its original size.
100%: At the end of the animation, the element returns to its original size.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.