Zoom in Zoom Out Animation: CSS Fundamentals Mastery

Introduction

In this lab, we will explore the fundamentals of CSS programming. Through a series of exercises, we will learn how to use CSS to style HTML elements and create visually appealing web pages. By the end of the lab, you will have a solid understanding of CSS syntax and be able to apply it to your own web development projects.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL 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(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css(("`CSS`")) -.-> css/CSSPreprocessorsGroup(["`CSS Preprocessors`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/DynamicStylingGroup -.-> css/animations("`Animations`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") css/CSSPreprocessorsGroup -.-> css/mixins("`Mixins`") subgraph Lab Skills css/selectors -.-> lab-35259{{"`Zoom in Zoom Out Animation`"}} css/colors -.-> lab-35259{{"`Zoom in Zoom Out Animation`"}} css/margin_and_padding -.-> 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`"}} css/mixins -.-> lab-35259{{"`Zoom in Zoom Out Animation`"}} end

Zoom in Zoom Out Animation

index.html and style.css have already been provided in the VM.

To create a zoom in zoom out animation, follow these steps:

Define a three-step animation using @keyframes. At 0% and 100%, set the element to its original size using scale(1,1). At 50%, scale it up to 1.5 times its original size using scale(1.5,1.5).
Give the element a specific size using width and height.
Use animation to set the appropriate values for the element to make it animated.

Here's an example HTML and CSS code:

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

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

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

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Zoom in Zoom Out Animation lab. You can practice more labs in LabEx to improve your skills.

Zoom in Zoom Out Animation

Introduction

Skills Graph

Zoom in Zoom Out Animation

Summary

Other CSS Tutorials you may like