HTML-CSS: Staggered animation
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.
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
HTML-CSS: Tips of the Day
Two divs side by side - Fluid display
#sides{ margin:0; } #left{ float:left; width:75%; overflow:hidden; } #right{ float:left; width:25%; overflow:hidden; }
Ref: https://bit.ly/3EN8QKy
- New Content published on w3resource:
- HTML-CSS Practical: Exercises, Practice, Solution
- Java Regular Expression: Exercises, Practice, Solution
- Scala Programming Exercises, Practice, Solution
- Python Itertools exercises
- Python Numpy exercises
- Python GeoPy Package exercises
- Python Pandas exercises
- Python nltk exercises
- Python BeautifulSoup exercises
- Form Template
- Composer - PHP Package Manager
- PHPUnit - PHP Testing
- Laravel - PHP Framework
- Angular - JavaScript Framework
- Vue - JavaScript Framework
- Jest - JavaScript Testing Framework