| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width"> |
| <link rel="stylesheet" href="style.css"> |
| <script src="script.js"></script> |
| <title>Triggered Animation</title> |
| </head> |
| <body> |
| <p>Scroll down to see the first animation.</p> |
| <div class="slide animation-container"> |
| <h1>Slide in after delay</h1> |
| <div class="slide box"></div> |
| <div class="slide box"></div> |
| <div class="slide box"></div> |
| </div> |
| <p>Keep scrolling to see the next animation.</p> |
| <div class="animation-container"> |
| <h1>Animate after delay</h1> |
| <div class="spin box"> |
| </div> |
| </div> |
| <p>Keep scrolling to see the next animation.</p> |
| <div class="animation-container svg"> |
| <h1>Animate after delay</h1> |
| <svg viewBox="0 0 800 400"> |
| <path d="M 40,80 c 30,40 60,40 90,0 c 30,-40 60,-40 90,0 c 30,40 60,40 90,0 c 30,-40 60,-40 90,0 c 30,40 60,40 90,0 c 30,-40 60,-40 90,0 c 30,40 60,40 90,0 c 30,-40 60,-40 90,0"/> |
| <path d="M 40,110 c 30,40 60,40 90,0 c 30,-40 60,-40 90,0 c 30,40 60,40 90,0 c 30,-40 60,-40 90,0 c 30,40 60,40 90,0 c 30,-40 60,-40 90,0 c 30,40 60,40 90,0 c 30,-40 60,-40 90,0"/> |
| <path d="M 40,140 c 30,40 60,40 90,0 c 30,-40 60,-40 90,0 c 30,40 60,40 90,0 c 30,-40 60,-40 90,0 c 30,40 60,40 90,0 c 30,-40 60,-40 90,0 c 30,40 60,40 90,0 c 30,-40 60,-40 90,0"/> |
| <circle cx="250" cy="270"/> |
| <circle cx="530" cy="270"/> |
| <circle cx="320" cy="270"/> |
| <circle cx="460" cy="270"/> |
| <circle cx="390" cy="270"/> |
| </svg> |
| </div> |
| |
| </body> |
| </html> |
