Create Animation Using Html & Css.
Animation.html
| <!DOCTYPE html> |
| <html> |
| <head> |
| <link rel="stylesheet" href="animation.css"> |
| <title></title> |
| </head> |
| <body> |
| <p>This Tutorial Perform By Codes With Sunny......</p> |
| <div></div> |
| </body> |
| </html> |
animation.css
| <style> |
| *{ |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Poppins', sans-serif; |
| } |
| html,body{ |
| display: grid; |
| height: 50%; |
| width: 100%; |
| place-items: center; |
| background: -webkit-linear-gradient(left, #BD3FAA, #6343BC ); |
| } |
| div { |
| width: 100px; |
| height: 100px; |
| background-color: blue; |
| position: relative; |
| animation-name: example1; |
| animation-duration: 4s; |
| } |
| |
| @keyframes example1 { |
| 0% {background-color:blue; left:0px; top:0px;} |
| 25% {background-color:yellow; left:200px; top:0px;} |
| 50% {background-color:red; left:200px; top:200px;} |
| 75% {background-color:green; left:0px; top:200px;} |
| 100% {background-color:blue; left:0px; top:0px;} |
| } |
| </style> |
Posts
0 Comments
Please Do Not Comments Any Span Or Span link..