vollständig
gekürzt
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>HCL131 Animationen</title> <style> @keyframes meineAnimation { from {background-color:blue;} to {background-color:red;} } div { width: 500px; height: 500px; background-color:green; animation-name: meineAnimation; animation-duration: 4s; } @keyframes rundeEcken { from {border-radius:0px;} to {border-radius: 500px;} } #re { border: 20px solid red; border-radius: 500px; animation-name: rundeEcken; animation-duration: 5s; } </style> </head> <body> <div> </div> <hr> <div id="re"> </div> </body> </html>
