Skip to content

Instantly share code, notes, and snippets.

@bennpearson

bennpearson/index.html

Last active January 31, 2016 00:09
Show Gist options
  • Save bennpearson/46d080eb2cbf4775e458 to your computer and use it in GitHub Desktop.
Save bennpearson/46d080eb2cbf4775e458 to your computer and use it in GitHub Desktop.
Download ZIP
SVG animation
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 Animation</title>
<style>
/* windmill and cloud animation */
#windmill_wrapper {
position:absolute;
-webkit-perspective:300;
top: 42px;
left:80px;
overflow:hidden;
width:180px;
height:180px;
background-color: rgba(0, 0, 0, 0);
z-index:-1;
}
#windmill_perspective{
position: absolute;
-webkit-perspective:300;
width: 100px;
height: 100px;
z-index:-1;
}
#sprite_windmill {
position:absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
overflow: hidden;
background-image: url(https://raw.github.com/bennpearson/rumpelstiltskin/master/book/gfx/windmill.png);
background-repeat: no-repeat;
background-position: 0 top;
z-index:-1;
-webkit-transform: rotateY(40deg);
}
.animate_windmill {
-webkit-animation-name: spin;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-duration: 30s;
}
@-webkit-keyframes spin {
0% {
-webkit-transform:rotateY(40deg) rotate(0);
}
100% {
-webkit-transform:rotateY(40deg) rotate(1080deg);
}
}
#sprite_cloud {
position:absolute;
right:-120px;
top:20px;
width: 100px;
height: 100px;
overflow: hidden;
background-image: url(https://raw.github.com/bennpearson/rumpelstiltskin/master/book/gfx/windmill_cloud.png);
background-repeat: no-repeat;
background-position: 0 top;
z-index:-1;
}
.animate_cloud {
-webkit-animation-name: blow;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-duration: 30s;
}
@-webkit-keyframes blow {
0% {
position:absolute;
right:-120px;
top:20px;
}
100% {
position:absolute;
right:220px;
top:20px;
}
}
.dropcap_o{
background: transparent url(https://raw.github.com/bennpearson/rumpelstiltskin/master/book/images/1a.png) no-repeat scroll 0 0;
float: left;
font-size: 1px;
text-indent: -9999px !important;
height: 252px;
width: 252px;
position: absolute;
top: 15px;
left: 50px;
}
</style>
</head>
<body>
<div id="windmill_wrapper">
<div id="sprite_windmill" class="animate_windmill">
</div>
<div id="sprite_cloud" class="animate_cloud">
</div>
</div>
<p class="intro"><a class="dropcap_o" >O</a></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment