Skip to content

Instantly share code, notes, and snippets.

@flaki

flaki/README.md

Last active March 23, 2017 16:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save flaki/139d43870ea452e6c906e5bfae993fb3 to your computer and use it in GitHub Desktop.
Save flaki/139d43870ea452e6c906e5bfae993fb3 to your computer and use it in GitHub Desktop.
Download ZIP
Animate the Mozilla.org CSS Grid demo!
Raw
README.md

How To Use?

  1. Navigate to Mozilla.org's CSS Grid demo page
  2. In Firefox, open devtools and create a new stylesheet. Copy grid-logo-animate.css's contents in there!
    • Alternatively you can copy/paste grid-logo-animate.js into the devtools console and hit enter—this should work in any browser.
  3. Hover the logo, watch it fade away.
  4. Lean back, move your cursor off the logo, and enjoy!
Raw
grid-logo-animate.css
#page-nav+.grid-content>* {
opacity: 0;
}
#page-nav+.grid-content>:nth-child( 6) {
width: 0;
}
#page-nav+.grid-content>:nth-child( 4) {
background-color: #F0F0F0;
transform-origin: 50% 90%;
}
#page-nav+.grid-content>:nth-child( 8) {
background-image: repeating-linear-gradient(-45deg,#91df00,#91df00 10%,transparent 10%,transparent 20.8%);
background-position: 0 0;
}
#page-nav+.grid-content>:nth-child(10)>* {
opacity: 0;
}
#page-nav+.grid-content>:nth-child( 1) { opacity: 1; transition: opacity 1.3s ease 1.6s; }
#page-nav+.grid-content>:nth-child( 3) { opacity: 1; transition: opacity 1.3s ease 2.4s; }
#page-nav+.grid-content>:nth-child( 6) { opacity: 1; transition: all .9s ease 2.8s; width: 90%; }
#page-nav+.grid-content>:nth-child( 7) { opacity: 1; transition: opacity 1.3s ease 3.2s; }
#page-nav+.grid-content>:nth-child( 8) { opacity: 1; transition: all 1.3s ease 4.0s; background-position: -4em 0; }
#page-nav+.grid-content>:nth-child( 5) { opacity: 1; transition: opacity 1.3s ease 5.2s; }
#page-nav+.grid-content>:nth-child( 5)>:nth-child(1) { transition: all .9s ease 6.0s; text-indent: 0; opacity: 1; }
#page-nav+.grid-content>:nth-child( 5)>:nth-child(2) { transition: all .9s ease 5.8s; text-indent: 0; opacity: 1; }
#page-nav+.grid-content>:nth-child( 5)>:nth-child(3) { transition: all .9s ease 5.6s; text-indent: 0; opacity: 1; }
#page-nav+.grid-content>:nth-child( 5)>:nth-child(4) { transition: all .9s ease 5.4s; text-indent: 0; opacity: 1; }
#page-nav+.grid-content>:nth-child( 9) { opacity: 1; transition: opacity 1.3s ease 6.6s; }
#page-nav+.grid-content>:nth-child(10) { opacity: 1; transition: opacity 1.3s ease 6.8s; }
#page-nav+.grid-content>:nth-child(10)>:nth-child(2) { transition: all .9s ease 7.6s; opacity: 1; margin: 0; }
#page-nav+.grid-content>:nth-child(10)>:nth-child(1) { transition: all 1.1s ease 8.0s; opacity: 1; margin: 0; }
#page-nav+.grid-content>:nth-child(10)>:nth-child(3) { transition: all 1.1s ease 8.0s; opacity: 1; margin: 0; }
#page-nav+.grid-content>:nth-child( 4) { opacity: 1; transition: opacity 1.3s ease 9.0s, transform .9s ease 9.0s; transform: rotate(0); }
#page-nav+.grid-content>:nth-child( 2) { opacity: 1; transition: opacity 2.0s ease 10.0s; }
#page-nav+.grid-content:hover>* {
opacity: 0 !important;
}
#page-nav+.grid-content:hover * {
transition-delay: 0s !important;
}
#page-nav+.grid-content:hover>:nth-child( 4) { transform: rotate(90deg); }
#page-nav+.grid-content:hover>:nth-child( 6) { width: 0; }
#page-nav+.grid-content:hover>:nth-child( 8) {
background-position: 0;
}
#page-nav+.grid-content:hover>:nth-child( 5)>* {
opacity: 0;
transition: none;
}
#page-nav+.grid-content:hover>:nth-child( 5)>:nth-child(1) { text-indent: -100%; }
#page-nav+.grid-content:hover>:nth-child( 5)>:nth-child(2) { text-indent: -200%; }
#page-nav+.grid-content:hover>:nth-child( 5)>:nth-child(3) { text-indent: -300%; }
#page-nav+.grid-content:hover>:nth-child( 5)>:nth-child(4) { text-indent: -400%; }
#page-nav+.grid-content:hover>:nth-child(10)>* { opacity: 0; }
#page-nav+.grid-content:hover>:nth-child(10)>:nth-child(2) { margin: 1.2em; }
#page-nav+.grid-content:hover>:nth-child(10)>:nth-child(1) { margin: -1em; }
#page-nav+.grid-content:hover>:nth-child(10)>:nth-child(3) { margin: -1em; }
Raw
grid-logo-animate.js
(S => {
S.textContent = `
#page-nav+.grid-content>* {
opacity: 0;
}
#page-nav+.grid-content>:nth-child( 6) {
width: 0;
}
#page-nav+.grid-content>:nth-child( 4) {
background-color: #F0F0F0;
transform-origin: 50% 90%;
}
#page-nav+.grid-content>:nth-child( 8) {
background-image: repeating-linear-gradient(-45deg,#91df00,#91df00 10%,transparent 10%,transparent 20.8%);
background-position: 0 0;
}
#page-nav+.grid-content>:nth-child(10)>* {
opacity: 0;
}
#page-nav+.grid-content>:nth-child( 1) { opacity: 1; transition: opacity 1.3s ease 1.6s; }
#page-nav+.grid-content>:nth-child( 3) { opacity: 1; transition: opacity 1.3s ease 2.4s; }
#page-nav+.grid-content>:nth-child( 6) { opacity: 1; transition: all .9s ease 2.8s; width: 90%; }
#page-nav+.grid-content>:nth-child( 7) { opacity: 1; transition: opacity 1.3s ease 3.2s; }
#page-nav+.grid-content>:nth-child( 8) { opacity: 1; transition: all 1.3s ease 4.0s; background-position: -4em 0; }
#page-nav+.grid-content>:nth-child( 5) { opacity: 1; transition: opacity 1.3s ease 5.2s; }
#page-nav+.grid-content>:nth-child( 5)>:nth-child(1) { transition: all .9s ease 6.0s; text-indent: 0; opacity: 1; }
#page-nav+.grid-content>:nth-child( 5)>:nth-child(2) { transition: all .9s ease 5.8s; text-indent: 0; opacity: 1; }
#page-nav+.grid-content>:nth-child( 5)>:nth-child(3) { transition: all .9s ease 5.6s; text-indent: 0; opacity: 1; }
#page-nav+.grid-content>:nth-child( 5)>:nth-child(4) { transition: all .9s ease 5.4s; text-indent: 0; opacity: 1; }
#page-nav+.grid-content>:nth-child( 9) { opacity: 1; transition: opacity 1.3s ease 6.6s; }
#page-nav+.grid-content>:nth-child(10) { opacity: 1; transition: opacity 1.3s ease 6.8s; }
#page-nav+.grid-content>:nth-child(10)>:nth-child(2) { transition: all .9s ease 7.6s; opacity: 1; margin: 0; }
#page-nav+.grid-content>:nth-child(10)>:nth-child(1) { transition: all 1.1s ease 8.0s; opacity: 1; margin: 0; }
#page-nav+.grid-content>:nth-child(10)>:nth-child(3) { transition: all 1.1s ease 8.0s; opacity: 1; margin: 0; }
#page-nav+.grid-content>:nth-child( 4) { opacity: 1; transition: opacity 1.3s ease 9.0s, transform .9s ease 9.0s; transform: rotate(0); }
#page-nav+.grid-content>:nth-child( 2) { opacity: 1; transition: opacity 2.0s ease 10.0s; }
#page-nav+.grid-content:hover>* {
opacity: 0 !important;
}
#page-nav+.grid-content:hover * {
transition-delay: 0s !important;
}
#page-nav+.grid-content:hover>:nth-child( 4) { transform: rotate(90deg); }
#page-nav+.grid-content:hover>:nth-child( 6) { width: 0; }
#page-nav+.grid-content:hover>:nth-child( 8) {
background-position: 0;
}
#page-nav+.grid-content:hover>:nth-child( 5)>* {
opacity: 0;
transition: none;
}
#page-nav+.grid-content:hover>:nth-child( 5)>:nth-child(1) { text-indent: -100%; }
#page-nav+.grid-content:hover>:nth-child( 5)>:nth-child(2) { text-indent: -200%; }
#page-nav+.grid-content:hover>:nth-child( 5)>:nth-child(3) { text-indent: -300%; }
#page-nav+.grid-content:hover>:nth-child( 5)>:nth-child(4) { text-indent: -400%; }
#page-nav+.grid-content:hover>:nth-child(10)>* { opacity: 0; }
#page-nav+.grid-content:hover>:nth-child(10)>:nth-child(2) { margin: 1.2em; }
#page-nav+.grid-content:hover>:nth-child(10)>:nth-child(1) { margin: -1em; }
#page-nav+.grid-content:hover>:nth-child(10)>:nth-child(3) { margin: -1em; }
`
document.head.appendChild(S);
})(document.createElement('style'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment