Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style type="text/css">
- @keyframes racing-square {
- 0%{
- left:0px;
- top:0px;
- }
- 25%{
- top:0;
- left:200px;
- }
- 50%{
- left:200px;
- top:200px;
- }
- 75%{
- left:0px;
- top:200px;
- }
- 100%{
- left:0px;
- top:0px;
- }
- }
- .container{
- position:relative;
- }
- .container:hover{
- }
- .sample-animation{
- animation: racing-square 4s linear infinite;
- }
- .container div:nth-child(1){
- background-color: black;
- }
- .container div:nth-child(2){
- background-color: lightblue;
- animation-delay: 0.2s;
- }
- .container div:nth-child(3){
- background-color: aquamarine;
- animation-delay: 0.4s;
- }
- .container div:nth-child(4){
- background-color: darkolivegreen;
- animation-delay: 0.6s;
- }
- .container > div {
- width: 16px;
- height: 16px;
- border-radius: 100%;
- display: inline-block;
- position: absolute;
- left:0;
- }
- </style>
- </head>
- <body>
- <div style="width: 300px;margin:50px auto 0px" class="container">
- <div class="sample-animation"></div>
- <div class="sample-animation"></div>
- <div class="sample-animation"></div>
- <div class="sample-animation"></div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement