Skip to content

Instantly share code, notes, and snippets.

@vasilisvg

vasilisvg/dabblet.css

Created May 11, 2014 19:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save vasilisvg/469fd663a8d8c8781dda to your computer and use it in GitHub Desktop.
Save vasilisvg/469fd663a8d8c8781dda to your computer and use it in GitHub Desktop.
Download ZIP
CSS animations
Raw
dabblet.css
/**
* CSS animations
*/
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
div {
width: 5em;
height: 5em;
margin: 3em;
background: red;
transform-origin: ;
}
div:hover {
animation: rotate 1s /* .2s infinite ease-in-out alternate */
}
@keyframes change-background {
from {
background: hsl(0, 50%, 50%);
}
16% {
background: hsl(60, 50%, 50%);
}
33% {
background: hsl(120, 50%, 50%);
}
50% {
background: hsl(180, 50%, 50%);
}
66% {
background: hsl(240, 50%, 50%);
}
83% {
background: hsl(300, 50%, 50%);
}
to {
background: hsl(0, 50%, 50%);
}
}
body {
//animation: change-background 60s infinite;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div></div>
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