Simple Animation in Html and css on December 21, 2021 Get link Facebook Twitter Pinterest Email Other Apps How to make Simple animation Html and css only Html part new 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