Skip to content

Instantly share code, notes, and snippets.

@divins

divins/dabblet.css

Forked from anonymous/dabblet.css
Created October 14, 2013 16:18
Show Gist options
  • Save divins/6978203 to your computer and use it in GitHub Desktop.
Save divins/6978203 to your computer and use it in GitHub Desktop.
Download ZIP
demo to explain chained transforms
Raw
dabblet.css
/**
* demo to explain chained transforms
*/
* { margin: 0; }
.wrap, .wrap * { display: block; width: 4em; height: 4em; position: absolute; top: 25%; left: 50%}
.wrap { outline: dashed 1px dodgerblue; margin: 13em auto 0; }
.deg0 {
position: absolute;
animation: ani0 1s infinite;
opacity: 0
}
.deg45 {
position: absolute;
animation: ani45 1s infinite;
opacity: 0
}
@keyframes ani45 {
25% { opacity: 0.1}
50% { transform: translate(9em, 9em) ease-out; opacity: 1; }
100% { transform: translate(9em, 9em); opacity: 1 }
}
@keyframes ani0 {
25% { opacity: 0.1}
50% { transform: translate(12em, 0em) ease-out; opacity: 1; }
100% { transform: translate(12em, 0em); opacity: 1 }
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class='wrap'>
<a href='#' class='deg45'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg'></a>
</div>
<div class='wrap'>
<a href='#' class='deg0'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg'></a>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment