Skip to content

Instantly share code, notes, and snippets.

@alexmwalker

alexmwalker/dabblet.css

Created March 30, 2012 01:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alexmwalker/2245454 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alexmwalker/2245454 to your computer and use it in GitHub Desktop.
Download ZIP
Buzzing bee *
Raw
dabblet.css
/**
* Buzzing bee *
*/
div {border:dashed 1px red}
div#content{height:50px;color:#fff;padding:0px 3%;margin:20px;
transform:rotate(0deg);
position:relative;width:20%;
animation: translateX 8s 1 ease-in-out;
}
div#hz{
animation: translateX 4s infinite ease-in-out;
}
div#bee {
background:url(http://neighborbee.com/wp-content/themes/clockworksimpleREVISED/images/avatar/bee.jpg) no-repeat;
width:36px;
height:36px;
margin:-18px;
left:0;
top:0;
position:absolute;
animation: translateY 4s infinite 1s ease-in-out
}
@keyframes leftright{0%, 100% {left:0}50%{left:100%}}
@keyframes updown{0%, 100% {top:0}50%{top:100%;}}
@keyframes box {0%, 100% {left:0;margin-left:0}50%{left:80%;margin-left:-20%}}
@keyframes translateY{
0%, 100% {transform:translate3d(0px, 0px, 100px);}
50%{transform:translate3d(0px, 200px, 100px)}
}
@keyframes translateX{
0%, 100% {transform:translate3d(0px, 0px, 100px);}
50%{transform:translate3d(200%, 0px, 100px)}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="content">
<div id="hz">
<div id="bee">
</div>
</div>
</div>
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment