Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Oppgave 5.2</title>
- <style type="text/css">
- body{
- background-color: rgb(250, 150, 200);
- margin: 0px;
- }
- #box1,#box2,#box3,#box4{
- background-color: rgb(200,100,150);
- width: 100px;
- height: 100px;
- position: absolute;
- }
- #box1{
- -webkit-animation-name: loop;
- -webkit-animation-duration: 12s;
- -webkit-animation-iteration-count:infinite;
- -webkit-animation-timing-function:linear;
- }
- @-webkit-keyframes loop{
- 25%{
- left: 0%;
- top: 0%;
- margin-left: 100%;
- margin-top: 0%;
- }
- 50%{
- left: 100%;
- top: 100%;
- margin-left:0%;
- margin-top:0%;
- }
- 75%{
- left: 0%;
- top: 100%;
- margin-left: 0%;
- margin-top: 0%;
- }
- 100%{
- left: 0%;
- top: 0%;
- margin-left: 0%;
- margin-right: 100%;
- }
- }
- #box2{
- -webkit-animation-name: loop;
- -webkit-animation-duration: 12s;
- -webkit-animation-iteration-count:infinite;
- -webkit-animation-timing-function:linear;
- -webkit-animation-delay: 3s;
- }
- @-webkit-keyframes loop{
- 25%{
- left: 0%;
- top: 0%;
- margin-left: 100%;
- margin-top: 0%;
- }
- 50%{
- left: 100%;
- top: 100%;
- margin-left:0%;
- margin-top:0%;
- }
- 75%{
- left: 0%;
- top: 100%;
- margin-left: 0%;
- margin-top: 0%;
- }
- 100%{
- left: 0%;
- top: 0%;
- margin-left: 0%;
- margin-right: 100%;
- }
- }
- #box3{
- -webkit-animation-name: loop;
- -webkit-animation-duration: 12s;
- -webkit-animation-iteration-count:infinite;
- -webkit-animation-timing-function:linear;
- -webkit-animation-delay: 6s;
- }
- @-webkit-keyframes loop{
- 25%{
- left: 0%;
- top: 0%;
- margin-left: 100%;
- margin-top: 0%;
- }
- 50%{
- left: 100%;
- top: 100%;
- margin-left:0%;
- margin-top:0%;
- }
- 75%{
- left: 0%;
- top: 100%;
- margin-left: 0%;
- margin-top: 0%;
- }
- 100%{
- left: 0%;
- top: 0%;
- margin-left: 0%;
- margin-right: 100%;
- }
- }
- #box4{
- -webkit-animation-name: loop;
- -webkit-animation-duration: 12s;
- -webkit-animation-iteration-count:infinite;
- -webkit-animation-timing-function:linear;
- -webkit-animation-delay: 9s;
- }
- @-webkit-keyframes loop{
- 25%{
- left: 0%;
- top: 0%;
- margin-left: 100%;
- margin-top: 0%;
- }
- 50%{
- left: 100%;
- top: 100%;
- margin-left:0%;
- margin-top:0%;
- }
- 75%{
- left: 0%;
- top: 100%;
- margin-left: 0%;
- margin-top: 0%;
- }
- 100%{
- left: 0%;
- top: 0%;
- margin-left: 0%;
- margin-right: 100%;
- }
- }
- #box1:hover, #box2:hover, #box3:hover, #box4:hover{
- -webkit-animation-play-state:paused;
- }
- </style>
- </head>
- <body>
- <section>
- <div id="box1"></div>
- <div id="box2"></div>
- <div id="box3"></div>
- <div id="box4"></div>
- </section>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement