Skip to content

Instantly share code, notes, and snippets.

@flaki flaki/README.md
Last active Mar 23, 2017

Embed
What would you like to do?
Animate the Mozilla.org CSS Grid demo!

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!
#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; }
(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
You can’t perform that action at this time.