Skip to content

Instantly share code, notes, and snippets.

@aurelkurtula

aurelkurtula/dabblet.css

Created February 12, 2013 08:42
Show Gist options
  • Save aurelkurtula/4761007 to your computer and use it in GitHub Desktop.
Save aurelkurtula/4761007 to your computer and use it in GitHub Desktop.
Download ZIP
exploring Animation
Raw
dabblet.css
/* exploring Animation */
p{
background: blue;
display: block;
width: 200px;
height: 100px;
border-radius: 200px 200px 0 0;
margin:40px;
position: relative;
animation: movingi infinite 6s alternate;
}
@keyframes movingi {
0% {
margin-left: 0px; margin-top: 0;
}
50% {
width: 100px;
height: 50px;
}
100% {
margin-left: 600px;
margin-top: 0px;
}
}
p:after{
content: ' ';
display: block;
width: 110px; height: 60px;
border-radius: 200px 200px 0 0;
background: blue;
position: absolute;
left: -40px;
top: 40px;
}
p:before{
content: ' ';
display: block;
width: 110px; height: 60px;
border-radius: 200px 200px 0 0;
background: blue;
position: absolute;
left: 140px;
top: 40px;
animation: moving infinite 6s alternate;
}
@keyframes moving {
50% {
width: 55px;
height: 30px;
}
100% {
width: 110px; height: 60px;
}
}
span:active{
color:red;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<p></p>
<span>sometthing</span>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment