HTML-CSS: Zoom in zoom out animation
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.
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.
https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/html-css-practical-exercise-45.php
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics