Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Der Titel des Dokuments</title> <style> html, body { margin: 0; padding: 0; } div { position: relative; width: 100px; height: 100px; margin: 30px 0; border-radius: 50%; animation-name: pulse; } .element-one { background-color: #1c87c9; animation-duration: 3s; animation-iteration-count: 3; } .element-two { margin: 0; background-color: #83bf42; animation-duration: 5s; animation-iteration-count: 2; } @keyframes pulse { 0% { left: 0; } 50% { left: 50%; } 100% { left: 0; } } </style> </head> <body> <h2>Beispiel für animation-iteration-count</h2> <p>Die Eigenschaft animation-iteration-count legt fest, wie oft ein Animationszyklus vor dem Stoppen abgespielt werden soll.</p> <div class="element-one"></div> <div class="element-two"></div> </body> </html>