0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<ul><li>index.html</li>
1
<ul><li>index.html</li>
2
<li>style.css</li>
2
<li>style.css</li>
3
</ul><p>HTML</p>
3
</ul><p>HTML</p>
4
<p><!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">&#58884;</button> <div class="squares"> <span class="square"></span> <span class="square"></span> <span class="square"></span> <span class="square"></span> </div> </body> </html></p>
4
<p><!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">&#58884;</button> <div class="squares"> <span class="square"></span> <span class="square"></span> <span class="square"></span> <span class="square"></span> </div> </body> </html></p>
5
<p>Thanks! We’ll fix everything at once!</p>
5
<p>Thanks! We’ll fix everything at once!</p>
6
<p>You’ve gone to a different page</p>
6
<p>You’ve gone to a different page</p>
7
<p>Click inside the mini-browser to shift the focus onto this window.</p>
7
<p>Click inside the mini-browser to shift the focus onto this window.</p>
8
<p>100%</p>
8
<p>100%</p>
9
<ol><li>Assign a smooth transition for the transform property of the .square squares that has a duration of transition-duration: 500ms.</li>
9
<ol><li>Assign a smooth transition for the transform property of the .square squares that has a duration of transition-duration: 500ms.</li>
10
<li>For the first square, assign a transition delay of transition-delay: 50ms, and assign one of 100ms for the second square.</li>
10
<li>For the first square, assign a transition delay of transition-delay: 50ms, and assign one of 100ms for the second square.</li>
11
<li>Then assign a delays of 150ms and 200ms for the third and fourth squares, respectively.</li>
11
<li>Then assign a delays of 150ms and 200ms for the third and fourth squares, respectively.</li>
12
</ol><p>Click the .fab-play button to toggle the square-active class for the squares.</p>
12
</ol><p>Click the .fab-play button to toggle the square-active class for the squares.</p>