Simple Animation in Html and css on December 21, 2021 Get link Facebook X Pinterest Email Other Apps How to make Simple animation Html and css only Html part <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>new</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"> </div> </body> </html> CSS part *{ margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; background: #333; margin-top: 150px; margin-left: 150px; } .box{ width: 400px; height: 400px; background: red; animation: animate .2s linear infinite; animation-duration: 3s; } @keyframes animate{ 0%{ background: red; left: 0px; top: 0px; } 25%{ background: yellowgreen; left: 200px; top: 0px; width: 300px; } 50%{ background: blue; left: 200px; top: 200px; width: 600px; } 75%{ background: gold; left: 0px; top: 200px; } 100%{ top: 0px; left: 0px; background: red; } } Comments
Comments
Post a Comment