HTML-CSS: Staggered animation

Last update on May 28 2022 07:25:39 (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-->
<!DOCTYPE html>
 <html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Using HTML, CSS create a staggered animation for the elements of a list.</title>
</head>
<body>
<strong>Preview:</strong><br>
<div class="container">
  <input type="checkbox" name="menu" id="menu" class="menu-toggler">
  <label for="menu" class="menu-toggler-label">Menu</label>
  <ul class="stagger-menu">
    <li style="--i: 0">Home</li>
    <li style="--i: 1">Privacy</li>
    <li style="--i: 2">About</li>
    <li style="--i: 3">Contact</li>
    <li style="--i: 4">Feedback</li>
  </ul>
</div>
</body>
</html>

CSS Code:

<style>

.container {
  overflow-x: hidden;
  width: 100%;
}

.menu-toggler {
  display: none;
}

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

.stagger-menu {
  list-style-type: none;
  margin: 11px 0;
  padding: 0;
}

.stagger-menu li {
  margin-bottom: 8px;
  font-size: 18px;
  opacity: 0;
  transform: translateX(100%);
  transition-property: opacity, transform;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.750, -0.015, 0.565, 1.055);
}

.menu-toggler:checked ~ .stagger-menu li {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(0.055s * var(--i));
}
</style>

HTML-CSS Editor:

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

HTML-CSS: Tips of the Day

What is the difference between id and class in CSS, and when should I use them?

Example:

#header_id {font-color:#fff} .header_class {font-color:#000}

(Note that CSS uses the prefix # for IDs and . for Classes.)

However color was an HTML 4.01 <font> tag attribute deprecated in HTML 5. In CSS there is no "font-color", the style is color so the above should read:

Example:

#header_id {color:#fff} .header_class {color:#000}

The text would be white.

Ref: https://bit.ly/39Stv4P