Skip to content

Instantly share code, notes, and snippets.

@valhead

valhead/dabblet.css

Created January 21, 2012 19:50
Show Gist options
  • Save valhead/1653732 to your computer and use it in GitHub Desktop.
Save valhead/1653732 to your computer and use it in GitHub Desktop.
Download ZIP
Playing with crossfades
Raw
dabblet.css
/**
* Playing with crossfades
*/
div {width:250px; height:80px;position:absolute;}
div:nth-child(1),div:nth-child(2) {top:50px; left:10px;}
div:nth-child(3),div:nth-child(4) {top:50px; left:300px;}
div:nth-child(5),div:nth-child(6) {top:50px; left:600px;}
/*
basic and kind of okay
*/
div:nth-child(1) {
background:url(http://i.imgur.com/CHfDi.jpg);
opacity:1;
transition: all .6s ease-in-out;
} div:nth-child(1):hover {opacity:0;}
div:nth-child(2) {
background:url(http://i.imgur.com/VeXjs.jpg);
opacity:0;
transition: all .6s ease-in-out;
} div:nth-child(2):hover {opacity:1;}
/*
basic, staggered timing:
still pretty basic, uneven timing which accents the very end of the transition
*/
div:nth-child(3) {
background:url(http://i.imgur.com/CHfDi.jpg);
opacity:1;
transition: all .4s ease-in-out;
} div:nth-child(3):hover {opacity:0;}
div:nth-child(4) {
background:url(http://i.imgur.com/VeXjs.jpg);
opacity:0;
transition: all .6s ease-in-out;
} div:nth-child(4):hover {opacity:1;}
/*
less "cross", and more of just a fade"
only the top image transitions
also a snappier custom timing function
*/
div:nth-child(5) {
background:url(http://i.imgur.com/VeXjs.jpg);
opacity:1;
} div:nth-child(5):hover {opacity:0;}
div:nth-child(6) {
background:url(http://i.imgur.com/CHfDi.jpg);
opacity:1;
transition: all .6s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
} div:nth-child(6):hover {opacity:0;}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment