- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>The transition-delay property</title>
<meta charset="utf-8">
<link rel="stylesheet" href="material.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="theory-theme">
<button class="fab fab-play" type="button"></button>
<div class="squares">
<span class="square"></span>
<span class="square"></span>
<span class="square"></span>
<span class="square"></span>
</div>
</body>
</html>
CSS
.square-active {
transform: scale(0);
}
.square {
}
.square:nth-child(1) {
}
.square:nth-child(2) {
}
.square:nth-child(3) {
}
.square:nth-child(4) {
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- Assign a smooth transition for the
transformproperty of the.squaresquares that has a duration oftransition-duration: 500ms. - For the first square, assign a transition delay of
transition-delay: 50ms, and assign one of100msfor the second square. - Then assign a delays of
150msand200msfor the third and fourth squares, respectively.
Click the .fab-play button to toggle the square-active class for the squares.
Comments