vollständig
gekürzt
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>HCL132 Animationen</title> <style> @keyframes bewegung { 0% {top: 0px; left: 0px; background: red;} 25% {top: 0px; left: 200px; background: blue;} 50% {top: 200px; left: 200px; background: yellow;} 75% {top: 200px; left: 0px; background: green;} 100% {top: 0px; left: 0px; background: red;} } #dasDIV { width:200px; height:200px; background:green; position:fixed; animation-name:bewegung; animation-duration:3s; animation-delay:5s; animation-iteration-count:3; } #dasDIV:hover {animation-play-state:paused;} </style> </head> <body> <div id="dasDIV"> Warte 5 Sekunden und 3 Wiederholungen und pausiere mich mit der Maus! </div> </body> </html>
