Skip to content

Instantly share code, notes, and snippets.

@datafatmunger

datafatmunger/ws1.html

Last active December 19, 2015 20:09
Show Gist options
  • Save datafatmunger/6011380 to your computer and use it in GitHub Desktop.
Save datafatmunger/6011380 to your computer and use it in GitHub Desktop.
Download ZIP
Hackers & Designers, Workshop 1, CSS3
Raw
ws1.html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:100px;
height:100px;
background:red;
position:relative;
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* animation:myfirst 5s linear 2s infinite alternate; */
/* Safari and Chrome: */
/* -webkit-animation:myfirst 5s linear 2s infinite alternate; */
}
@keyframes myfirst {
0% {background:red; left:0px; top:0px; transform: rotate(2000deg);}
25% {background:yellow; left:200px; top:0px; /* transform: rotate(360deg); */ }
50% {background:blue; left:200px; top:200px; /* transform: rotate(0deg); */}
75% {background:green; left:0px; top:200px; /* transform: translate(50px,100px); */}
100% {background:red; left:0px; top:0px; /* transform: scale(2, 2) */ }
}
@-webkit-keyframes myfirst /* Safari and Chrome */ {
0% {background:red; left:0px; top:0px; -webkit-transform: rotate(2000deg);}
25% {background:yellow; left:200px; top:0px; /* -webkit-transform: rotate(360deg); */}
50% {background:blue; left:200px; top:200px; /* -webkit-transform: rotate(0deg); */}
75% {background:green; left:0px; top:200px; /* -webkit-transform: translate(50px,100px); */ }
100% {background:red; left:0px; top:0px; /* -webkit-transform: scale(2, 2) */ }
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment