HTML-CSS: Staggered animation

Last update on March 07 2024 13:21:46 (UTC/GMT +8 hours)

HTML-CSS : Exercise-10 with Solution

Using HTML, CSS create a staggered animation for the elements of a list.

Set opacity: 0 and transform: translateX(100%) to make list elements transparent and move them all the way to the right.
Specify the same transition properties for list elements, except transition-delay.
Use inline styles to specify a value for --i for each list element. This will in turn be used for transition-delay to create the stagger effect.
Use the :checked pseudo-class selector for the checkbox to style list elements. Set opacity to 1 and transform to translateX(0) to make them appear and slide into view.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- License information -->
<!DOCTYPE html><!-- Document type declaration -->
<html><!-- Opening html tag -->
<head><!-- Opening head tag -->
<meta charset="utf-8"><!-- Character encoding -->
<meta name="viewport" content="width=device-width"><!-- Viewport meta tag -->
<title>Using HTML, CSS create a staggered animation for the elements of a list.</title><!-- Title of the webpage -->
</head><!-- Closing head tag -->
<body><!-- Opening body tag -->
<strong>Preview:</strong><br><!-- Preview heading -->
<div class="container"><!-- Container for the menu -->
<input type="checkbox" name="menu" id="menu" class="menu-toggler"><!-- Checkbox input for toggling menu -->
<label for="menu" class="menu-toggler-label">Menu</label><!-- Label for the menu-toggler checkbox -->
<ul class="stagger-menu"><!-- Unordered list with staggered animation -->
<li style="--i: 0">Home</li><!-- List item for Home -->
<li style="--i: 1">Privacy</li><!-- List item for Privacy -->
<li style="--i: 2">About</li><!-- List item for About -->
<li style="--i: 3">Contact</li><!-- List item for Contact -->
<li style="--i: 4">Feedback</li><!-- List item for Feedback -->
</ul>
</div>
</body><!-- Closing body tag -->
</html><!-- Closing html tag -->

Explanation:

<!DOCTYPE html>: Declaration of the HTML5 document type.
<html>: Opening tag of the HTML document.
<head>: Opening tag of the head section, containing metadata.

<meta charset="utf-8">: Declares the character encoding of the document as UTF-8.
<meta name="viewport" content="width=device-width">: Sets the viewport width to the device width.
<title>: Defines the title of the webpage.

<body>: Opening tag of the body section.

<strong>Preview:</strong>: Displays a heading indicating the preview.
<div class="container">: Container for the menu.

<input type="checkbox" name="menu" id="menu" class="menu-toggler">: Checkbox input for toggling the menu.
<label for="menu" class="menu-toggler-label">Menu</label>: Label for the menu-toggler checkbox.
<ul class="stagger-menu">: Unordered list with staggered animation.

<li style="--i: 0">Home</li>: List item for Home with a staggered animation.
<li style="--i: 1">Privacy</li>: List item for Privacy with a staggered animation.
<li style="--i: 2">About</li>: List item for About with a staggered animation.
<li style="--i: 3">Contact</li>: List item for Contact with a staggered animation.
<li style="--i: 4">Feedback</li>: List item for Feedback with a staggered animation.

CSS Code:

<style>
/* Opening style tag for CSS */

.container {
  overflow-x: hidden; /* Hide horizontal overflow */
  width: 100%; /* Set width to 100% */
}

.menu-toggler {
  display: none; /* Hide the menu toggler */
}

.menu-toggler-label {
  cursor: pointer; /* Set cursor to pointer */
  font-size: 20px; /* Set font size */
  font-weight: bold; /* Set font weight to bold */
}

.stagger-menu {
  list-style-type: none; /* Remove list bullets */
  margin: 11px 0; /* Set top and bottom margin */
  padding: 0; /* Remove padding */
}

.stagger-menu li {
  margin-bottom: 8px; /* Set bottom margin */
  font-size: 18px; /* Set font size */
  opacity: 0; /* Initially set opacity to 0 */
  transform: translateX(100%); /* Initially translate elements out of view */
  transition-property: opacity, transform; /* Specify properties to transition */
  transition-duration: 0.3s; /* Set transition duration */
  transition-timing-function: cubic-bezier(0.750, -0.015, 0.565, 1.055); /* Set transition timing function */
}

.menu-toggler:checked ~ .stagger-menu li {
  opacity: 1; /* Change opacity on checkbox checked */
  transform: translateX(0); /* Move elements into view */
  transition-delay: calc(0.055s * var(--i)); /* Delay transition based on index */
}
</style>/* Closing style tag */

Explanation:

.container: Styles the container for the menu.
.menu-toggler: Hides the menu toggler checkbox.
.menu-toggler-label: Styles the label associated with the menu toggler checkbox.
.stagger-menu: Styles the list containing the menu items.
stagger-menu li: Styles each menu item.

opacity: 0;: Initially sets the opacity of each menu item to 0.
transform: translateX(100%);: Initially translates each menu item to the right, placing them out of view.
transition-property: opacity, transform;: Specifies the properties to transition.
transition-duration: 0.3s;: Sets the duration of the transition to 0.3 seconds.
transition-timing-function: cubic-bezier(0.750, -0.015, 0.565, 1.055);: Sets the timing function for the transition.

.menu-toggler:checked ~ .stagger-menu li: Styles the menu items when the menu toggler checkbox is checked.

opacity: 1;: Changes the opacity of each menu item to 1 when the checkbox is checked, making them visible.
transform: translateX(0);: Moves each menu item back to its original position when the checkbox is checked.
transition-delay: calc(0.055s * var(--i));: Delays the transition of each menu item based on its index to create a staggered animation effect.

HTML-CSS Editor:

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