Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- div {
- background-image: url('http://nanocluster.umeche.maine.edu/mouse.png');
- position: relative;
- -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
- animation: myfirst 5s;
- }
- /* Chrome, Safari, Opera */
- @-webkit-keyframes myfirst {
- 0% {background-image:url('http://nanocluster.umeche.maine.edu/url('http://nanocluster.umeche.maine.edu/mouse.png'); left:0px; top:0px;}
- 25% {background-image:url('http://nanocluster.umeche.maine.edu/mouse.png'); left:200px; top:0px;}
- 50% {background-image:url('http://nanocluster.umeche.maine.edu/mouse.png'); left:200px; top:200px;}
- 75% {background-image:url('http://nanocluster.umeche.maine.edu/mouse.png'); left:0px; top:200px;}
- 100% {background-image:url('http://nanocluster.umeche.maine.edu/mouse.png'); left:0px; top:0px;}
- }
- /* Standard syntax */
- @keyframes myfirst {
- 0% {background-image:url('http://nanocluster.umeche.maine.edu/mouse.png'); left:0px; top:0px;}
- 25% {background-image:url('http://nanocluster.umeche.maine.edu/mouse.png'); left:200px; top:0px;}
- 50% {background-image:url('http://nanocluster.umeche.maine.edu/mouse.png'); left:200px; top:200px;}
- 75% {background-image:url('http://nanocluster.umeche.maine.edu/mouse.png'); left:0px; top:200px;}
- 100% {background-image:url('http://nanocluster.umeche.maine.edu/mouse.png'); left:0px; top:0px;}
- }
- </style>
- </head>
- <body>
- <div></div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
