Created
February 22, 2016 12:55
-
-
Save jdanyow/37021c7ed4c280532970 to your computer and use it in GitHub Desktop.
Alex the CSS Husky by David Khourshid http://codepen.io/davidkpiano/pen/wMqXea
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>GistRun</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div class="husky"> | |
| <div class="mane"> | |
| <div class="coat"></div> | |
| </div> | |
| <div class="body"> | |
| <div class="head"> | |
| <div class="ear"></div> | |
| <div class="ear"></div> | |
| <div class="face"> | |
| <div class="eye"></div> | |
| <div class="eye"></div> | |
| <div class="nose"></div> | |
| <div class="mouth"> | |
| <div class="lips"></div> | |
| <div class="tongue"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="torso"></div> | |
| </div> | |
| <div class="legs"> | |
| <div class="front-legs"> | |
| <div class="leg"></div> | |
| <div class="leg"></div> | |
| </div> | |
| <div class="hind-leg"> | |
| </div> | |
| </div> | |
| <div class="tail"> | |
| <div class="tail"> | |
| <div class="tail"> | |
| <div class="tail"> | |
| <div class="tail"> | |
| <div class="tail"> | |
| <div class="tail"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none"> | |
| <defs> | |
| <filter id="squiggly-0"> | |
| <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/> | |
| <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" /> | |
| </filter> | |
| <filter id="squiggly-1"> | |
| <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"/> | |
| <feDisplacementMap in="SourceGraphic" in2="noise" scale="3" /> | |
| </filter> | |
| <filter id="squiggly-2"> | |
| <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/> | |
| <feDisplacementMap in="SourceGraphic" in2="noise" scale="2" /> | |
| </filter> | |
| <filter id="squiggly-3"> | |
| <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/> | |
| <feDisplacementMap in="SourceGraphic" in2="noise" scale="3" /> | |
| </filter> | |
| <filter id="squiggly-4"> | |
| <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/> | |
| <feDisplacementMap in="SourceGraphic" in2="noise" scale="1" /> | |
| </filter> | |
| </defs> | |
| </svg> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @-webkit-keyframes head { | |
| 0% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 6.66667% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 20% { | |
| -webkit-transform: rotate(-14deg); | |
| transform: rotate(-14deg); | |
| } | |
| 40% { | |
| -webkit-transform: rotate(-7deg); | |
| transform: rotate(-7deg); | |
| } | |
| 46.66667% { | |
| -webkit-transform: rotate(-14deg); | |
| transform: rotate(-14deg); | |
| } | |
| 60% { | |
| -webkit-transform: rotate(-7deg); | |
| transform: rotate(-7deg); | |
| } | |
| 73.33333% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 80% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| } | |
| @keyframes head { | |
| 0% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 6.66667% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 20% { | |
| -webkit-transform: rotate(-14deg); | |
| transform: rotate(-14deg); | |
| } | |
| 40% { | |
| -webkit-transform: rotate(-7deg); | |
| transform: rotate(-7deg); | |
| } | |
| 46.66667% { | |
| -webkit-transform: rotate(-14deg); | |
| transform: rotate(-14deg); | |
| } | |
| 60% { | |
| -webkit-transform: rotate(-7deg); | |
| transform: rotate(-7deg); | |
| } | |
| 73.33333% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 80% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| } | |
| @-webkit-keyframes mouth { | |
| 0% { | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| } | |
| 6.66667% { | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| } | |
| 13.33333% { | |
| -webkit-transform: translateX(35%); | |
| transform: translateX(35%); | |
| } | |
| 20% { | |
| -webkit-transform: translateX(35%); | |
| transform: translateX(35%); | |
| } | |
| 26.66667% { | |
| -webkit-transform: translateX(35%); | |
| transform: translateX(35%); | |
| } | |
| 33.33333% { | |
| -webkit-transform: translateX(0) translateY(-5%); | |
| transform: translateX(0) translateY(-5%); | |
| } | |
| } | |
| @keyframes mouth { | |
| 0% { | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| } | |
| 6.66667% { | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| } | |
| 13.33333% { | |
| -webkit-transform: translateX(35%); | |
| transform: translateX(35%); | |
| } | |
| 20% { | |
| -webkit-transform: translateX(35%); | |
| transform: translateX(35%); | |
| } | |
| 26.66667% { | |
| -webkit-transform: translateX(35%); | |
| transform: translateX(35%); | |
| } | |
| 33.33333% { | |
| -webkit-transform: translateX(0) translateY(-5%); | |
| transform: translateX(0) translateY(-5%); | |
| } | |
| } | |
| @-webkit-keyframes nose { | |
| 0% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 6.66667% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 13.33333% { | |
| -webkit-transform: translateX(100%); | |
| transform: translateX(100%); | |
| } | |
| 26.66667% { | |
| -webkit-transform: translateX(100%); | |
| transform: translateX(100%); | |
| } | |
| 33.33333% { | |
| -webkit-transform: translateX(0) translateY(-15%); | |
| transform: translateX(0) translateY(-15%); | |
| } | |
| } | |
| @keyframes nose { | |
| 0% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 6.66667% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 13.33333% { | |
| -webkit-transform: translateX(100%); | |
| transform: translateX(100%); | |
| } | |
| 26.66667% { | |
| -webkit-transform: translateX(100%); | |
| transform: translateX(100%); | |
| } | |
| 33.33333% { | |
| -webkit-transform: translateX(0) translateY(-15%); | |
| transform: translateX(0) translateY(-15%); | |
| } | |
| } | |
| @-webkit-keyframes body { | |
| 0% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 6.66667% { | |
| -webkit-transform: translateY(3%); | |
| transform: translateY(3%); | |
| } | |
| 13.33333% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 20% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 26.66667% { | |
| -webkit-transform: translateY(2%); | |
| transform: translateY(2%); | |
| } | |
| 33.33333% { | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes body { | |
| 0% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 6.66667% { | |
| -webkit-transform: translateY(3%); | |
| transform: translateY(3%); | |
| } | |
| 13.33333% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 20% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 26.66667% { | |
| -webkit-transform: translateY(2%); | |
| transform: translateY(2%); | |
| } | |
| 33.33333% { | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| } | |
| } | |
| @-webkit-keyframes mane { | |
| 0% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 6.66667% { | |
| -webkit-transform: translateY(5%); | |
| transform: translateY(5%); | |
| } | |
| 13.33333% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 20% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 26.66667% { | |
| -webkit-transform: translateY(3%); | |
| transform: translateY(3%); | |
| } | |
| 33.33333% { | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes mane { | |
| 0% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 6.66667% { | |
| -webkit-transform: translateY(5%); | |
| transform: translateY(5%); | |
| } | |
| 13.33333% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 20% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 26.66667% { | |
| -webkit-transform: translateY(3%); | |
| transform: translateY(3%); | |
| } | |
| 33.33333% { | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| } | |
| } | |
| @-webkit-keyframes face { | |
| 0% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 6.66667% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 13.33333% { | |
| -webkit-transform: translateX(15%); | |
| transform: translateX(15%); | |
| } | |
| 20% { | |
| -webkit-transform: translateX(15%) translateY(0); | |
| transform: translateX(15%) translateY(0); | |
| } | |
| 26.66667% { | |
| -webkit-transform: translateX(15%) translateY(0); | |
| transform: translateX(15%) translateY(0); | |
| } | |
| 33.33333% { | |
| -webkit-transform: translateX(0) translateY(-15%); | |
| transform: translateX(0) translateY(-15%); | |
| } | |
| 40% { | |
| -webkit-transform: translateX(0) translateY(-15%); | |
| transform: translateX(0) translateY(-15%); | |
| } | |
| 46.66667% { | |
| -webkit-transform: translateX(0) translateY(0); | |
| transform: translateX(0) translateY(0); | |
| } | |
| } | |
| @keyframes face { | |
| 0% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 6.66667% { | |
| -webkit-transform: translate(0); | |
| transform: translate(0); | |
| } | |
| 13.33333% { | |
| -webkit-transform: translateX(15%); | |
| transform: translateX(15%); | |
| } | |
| 20% { | |
| -webkit-transform: translateX(15%) translateY(0); | |
| transform: translateX(15%) translateY(0); | |
| } | |
| 26.66667% { | |
| -webkit-transform: translateX(15%) translateY(0); | |
| transform: translateX(15%) translateY(0); | |
| } | |
| 33.33333% { | |
| -webkit-transform: translateX(0) translateY(-15%); | |
| transform: translateX(0) translateY(-15%); | |
| } | |
| 40% { | |
| -webkit-transform: translateX(0) translateY(-15%); | |
| transform: translateX(0) translateY(-15%); | |
| } | |
| 46.66667% { | |
| -webkit-transform: translateX(0) translateY(0); | |
| transform: translateX(0) translateY(0); | |
| } | |
| } | |
| @-webkit-keyframes left-eye { | |
| 2.66667% { | |
| -webkit-transform: scaleY(1); | |
| transform: scaleY(1); | |
| } | |
| 3.33333% { | |
| -webkit-transform: scaleY(0.3); | |
| transform: scaleY(0.3); | |
| } | |
| 4% { | |
| -webkit-transform: scaleY(1); | |
| transform: scaleY(1); | |
| } | |
| 6.66667% { | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| } | |
| 9.33333% { | |
| -webkit-transform: scaleY(1) translateX(75%); | |
| transform: scaleY(1) translateX(75%); | |
| } | |
| 10% { | |
| -webkit-transform: scaleY(0.3) translateX(75%); | |
| transform: scaleY(0.3) translateX(75%); | |
| } | |
| 10.66667% { | |
| -webkit-transform: scaleY(1) translateX(75%); | |
| transform: scaleY(1) translateX(75%); | |
| } | |
| 13.33333% { | |
| -webkit-transform: translateX(150%); | |
| transform: translateX(150%); | |
| } | |
| 22% { | |
| -webkit-transform: scaleY(1) translateX(150%); | |
| transform: scaleY(1) translateX(150%); | |
| } | |
| 22.66667% { | |
| -webkit-transform: scaleY(0.3) translateX(150%); | |
| transform: scaleY(0.3) translateX(150%); | |
| } | |
| 23.33333% { | |
| -webkit-transform: scaleY(1) translateX(150%); | |
| transform: scaleY(1) translateX(150%); | |
| } | |
| 25.33333% { | |
| -webkit-transform: scaleY(1) translateX(150%); | |
| transform: scaleY(1) translateX(150%); | |
| } | |
| 26% { | |
| -webkit-transform: scaleY(0.3) translateX(150%); | |
| transform: scaleY(0.3) translateX(150%); | |
| } | |
| 26.66667% { | |
| -webkit-transform: scaleY(1) translateX(150%); | |
| transform: scaleY(1) translateX(150%); | |
| } | |
| 33.33333% { | |
| -webkit-transform: translateX(0) translateY(-170%); | |
| transform: translateX(0) translateY(-170%); | |
| } | |
| 36% { | |
| -webkit-transform: scaleY(1) translateY(-170%); | |
| transform: scaleY(1) translateY(-170%); | |
| } | |
| 36.66667% { | |
| -webkit-transform: scaleY(0.3) translateY(-170%); | |
| transform: scaleY(0.3) translateY(-170%); | |
| } | |
| 37.33333% { | |
| -webkit-transform: scaleY(1) translateY(-170%); | |
| transform: scaleY(1) translateY(-170%); | |
| } | |
| 38% { | |
| -webkit-transform: scaleY(1) translateY(-170%); | |
| transform: scaleY(1) translateY(-170%); | |
| } | |
| 38.66667% { | |
| -webkit-transform: scaleY(0.3) translateY(-170%); | |
| transform: scaleY(0.3) translateY(-170%); | |
| } | |
| 39.33333% { | |
| -webkit-transform: scaleY(1) translateY(-170%); | |
| transform: scaleY(1) translateY(-170%); | |
| } | |
| 53.33333% { | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| } | |
| 65.33333% { | |
| -webkit-transform: scaleY(1) translateY(0); | |
| transform: scaleY(1) translateY(0); | |
| } | |
| 66% { | |
| -webkit-transform: scaleY(0.3) translateY(0); | |
| transform: scaleY(0.3) translateY(0); | |
| } | |
| 66.66667% { | |
| -webkit-transform: scaleY(1) translateY(0); | |
| transform: scaleY(1) translateY(0); | |
| } | |
| 70% { | |
| -webkit-transform: scaleY(1) translateY(0); | |
| transform: scaleY(1) translateY(0); | |
| } | |
| 70.66667% { | |
| -webkit-transform: scaleY(0.3) translateY(0); | |
| transform: scaleY(0.3) translateY(0); | |
| } | |
| 71.33333% { | |
| -webkit-transform: scaleY(1) translateY(0); | |
| transform: scaleY(1) translateY(0); | |
| } | |
| } | |
| @keyframes left-eye { | |
| 2.66667% { | |
| -webkit-transform: scaleY(1); | |
| transform: scaleY(1); | |
| } | |
| 3.33333% { | |
| -webkit-transform: scaleY(0.3); | |
| transform: scaleY(0.3); | |
| } | |
| 4% { | |
| -webkit-transform: scaleY(1); | |
| transform: scaleY(1); | |
| } | |
| 6.66667% { | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| } | |
| 9.33333% { | |
| -webkit-transform: scaleY(1) translateX(75%); | |
| transform: scaleY(1) translateX(75%); | |
| } | |
| 10% { | |
| -webkit-transform: scaleY(0.3) translateX(75%); | |
| transform: scaleY(0.3) translateX(75%); | |
| } | |
| 10.66667% { | |
| -webkit-transform: scaleY(1) translateX(75%); | |
| transform: scaleY(1) translateX(75%); | |
| } | |
| 13.33333% { | |
| -webkit-transform: translateX(150%); | |
| transform: translateX(150%); | |
| } | |
| 22% { | |
| -webkit-transform: scaleY(1) translateX(150%); | |
| transform: scaleY(1) translateX(150%); | |
| } | |
| 22.66667% { | |
| -webkit-transform: scaleY(0.3) translateX(150%); | |
| transform: scaleY(0.3) translateX(150%); | |
| } | |
| 23.33333% { | |
| -webkit-transform: scaleY(1) translateX(150%); | |
| transform: scaleY(1) translateX(150%); | |
| } | |
| 25.33333% { | |
| -webkit-transform: scaleY(1) translateX(150%); | |
| transform: scaleY(1) translateX(150%); | |
| } | |
| 26% { | |
| -webkit-transform: scaleY(0.3) translateX(150%); | |
| transform: scaleY(0.3) translateX(150%); | |
| } | |
| 26.66667% { | |
| -webkit-transform: scaleY(1) translateX(150%); | |
| transform: scaleY(1) translateX(150%); | |
| } | |
| 33.33333% { | |
| -webkit-transform: translateX(0) translateY(-170%); | |
| transform: translateX(0) translateY(-170%); | |
| } | |
| 36% { | |
| -webkit-transform: scaleY(1) translateY(-170%); | |
| transform: scaleY(1) translateY(-170%); | |
| } | |
| 36.66667% { | |
| -webkit-transform: scaleY(0.3) translateY(-170%); | |
| transform: scaleY(0.3) translateY(-170%); | |
| } | |
| 37.33333% { | |
| -webkit-transform: scaleY(1) translateY(-170%); | |
| transform: scaleY(1) translateY(-170%); | |
| } | |
| 38% { | |
| -webkit-transform: scaleY(1) translateY(-170%); | |
| transform: scaleY(1) translateY(-170%); | |
| } | |
| 38.66667% { | |
| -webkit-transform: scaleY(0.3) translateY(-170%); | |
| transform: scaleY(0.3) translateY(-170%); | |
| } | |
| 39.33333% { | |
| -webkit-transform: scaleY(1) translateY(-170%); | |
| transform: scaleY(1) translateY(-170%); | |
| } | |
| 53.33333% { | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| } | |
| 65.33333% { | |
| -webkit-transform: scaleY(1) translateY(0); | |
| transform: scaleY(1) translateY(0); | |
| } | |
| 66% { | |
| -webkit-transform: scaleY(0.3) translateY(0); | |
| transform: scaleY(0.3) translateY(0); | |
| } | |
| 66.66667% { | |
| -webkit-transform: scaleY(1) translateY(0); | |
| transform: scaleY(1) translateY(0); | |
| } | |
| 70% { | |
| -webkit-transform: scaleY(1) translateY(0); | |
| transform: scaleY(1) translateY(0); | |
| } | |
| 70.66667% { | |
| -webkit-transform: scaleY(0.3) translateY(0); | |
| transform: scaleY(0.3) translateY(0); | |
| } | |
| 71.33333% { | |
| -webkit-transform: scaleY(1) translateY(0); | |
| transform: scaleY(1) translateY(0); | |
| } | |
| } | |
| @-webkit-keyframes right-eye { | |
| 2.66667% { | |
| -webkit-transform: scaleY(1); | |
| transform: scaleY(1); | |
| } | |
| 3.33333% { | |
| -webkit-transform: scaleY(0.3); | |
| transform: scaleY(0.3); | |
| } | |
| 4% { | |
| -webkit-transform: scaleY(1); | |
| transform: scaleY(1); | |
| } | |
| 6.66667% { | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| } | |
| 9.33333% { | |
| -webkit-transform: scaleY(1) translateX(75%); | |
| transform: scaleY(1) translateX(75%); | |
| } | |
| 10% { | |
| -webkit-transform: scaleY(0.3) translateX(75%); | |
| transform: scaleY(0.3) translateX(75%); | |
| } | |
| 10.66667% { | |
| -webkit-transform: scaleY(1) translateX(75%); | |
| transform: scaleY(1) translateX(75%); | |
| } | |
| 13.33333% { | |
| -webkit-transform: translateX(150%); | |
| transform: translateX(150%); | |
| } | |
| 22% { | |
| -webkit-transform: scaleY(1) translateX(150%); | |
| transform: scaleY(1) translateX(150%); | |
| } | |
| 22.66667% { | |
| -webkit-transform: scaleY(0.3) translateX(150%); | |
| transform: scaleY(0.3) translateX(150%); | |
| } | |
| 23.33333% { | |
| -webkit-transform: scaleY(1) translateX(150%); | |
| transform: scaleY(1) translateX(150%); | |
| } | |
| 25.33333% { | |
| -webkit-transform: scaleY(1) translateX(150%); | |
| transform: scaleY(1) translateX(150%); | |
| } | |
| 26% { | |
| -webkit-transform: scaleY(0.3) translateX(150%); | |
| transform: scaleY(0.3) translateX(150%); | |
| } | |
| 26.66667% { | |
| -webkit-transform: scaleY(1) translateX(150%); | |
| transform: scaleY(1) translateX(150%); | |
| } | |
| 33.33333% { | |
| -webkit-transform: translateX(0) translateY(-170%); | |
| transform: translateX(0) translateY(-170%); | |
| } | |
| 36% { | |
| -webkit-transform: scaleY(1) translateY(-170%); | |
| transform: scaleY(1) translateY(-170%); | |
| } | |
| 36.66667% { | |
| -webkit-transform: scaleY(0.3) translateY(-170%); | |
| transform: scaleY(0.3) translateY(-170%); | |
| } | |
| 37.33333% { | |
| -webkit-transform: scaleY(1) translateY(-170%); | |
| transform: scaleY(1) translateY(-170%); | |
| } | |
| 38% { | |
| -webkit-transform: scaleY(1) translateY(-170%); | |
| transform: scaleY(1) translateY(-170%); | |
| } | |
| 38.66667% { | |
| -webkit-transform: scaleY(0.3) translateY(-170%); | |
| transform: scaleY(0.3) translateY(-170%); | |
| } | |
| 39.33333% { | |
| -webkit-transform: scaleY(1) translateY(-170%); | |
| transform: scaleY(1) translateY(-170%); | |
| } | |
| 53.33333% { | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| } | |
| 65.33333% { | |
| -webkit-transform: scaleY(1) translateY(0); | |
| transform: scaleY(1) translateY(0); | |
| } | |
| 66% { | |
| -webkit-transform: scaleY(0.3) translateY(0); | |
| transform: scaleY(0.3) translateY(0); | |
| } | |
| 66.66667% { | |
| -webkit-transform: scaleY(1) translateY(0); | |
| transform: scaleY(1) translateY(0); | |
| } | |
| 70% { | |
| -webkit-transform: scaleY(1) translateY(0); | |
| transform: scaleY(1) translateY(0); | |
| } | |
| 70.66667% { | |
| -webkit-transform: scaleY(0.3) translateY(0); | |
| transform: scaleY(0.3) translateY(0); | |
| } | |
| 71.33333% { | |
| -webkit-transform: scaleY(1) translateY(0); | |
| transform: scaleY(1) translateY(0); | |
| } | |
| } | |
| @keyframes right-eye { | |
| 2.66667% { | |
| -webkit-transform: scaleY(1); | |
| transform: scaleY(1); | |
| } | |
| 3.33333% { | |
| -webkit-transform: scaleY(0.3); | |
| transform: scaleY(0.3); | |
| } | |
| 4% { | |
| -webkit-transform: scaleY(1); | |
| transform: scaleY(1); | |
| } | |
| 6.66667% { | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| } | |
| 9.33333% { | |
| -webkit-transform: scaleY(1) translateX(75%); | |
| transform: scaleY(1) translateX(75%); | |
| } | |
| 10% { | |
| -webkit-transform: scaleY(0.3) translateX(75%); | |
| transform: scaleY(0.3) translateX(75%); | |
| } | |
| 10.66667% { | |
| -webkit-transform: scaleY(1) translateX(75%); | |
| transform: scaleY(1) translateX(75%); | |
| } | |
| 13.33333% { | |
| -webkit-transform: translateX(150%); | |
| transform: translateX(150%); | |
| } | |
| 22% { | |
| -webkit-transform: scaleY(1) translateX(150%); | |
| transform: scaleY(1) translateX(150%); | |
| } | |
| 22.66667% { | |
| -webkit-transform: scaleY(0.3) translateX(150%); | |
| transform: scaleY(0.3) translateX(150%); | |
| } | |
| 23.33333% { | |
| -webkit-transform: scaleY(1) translateX(150%); | |
| transform: scaleY(1) translateX(150%); | |
| } | |
| 25.33333% { | |
| -webkit-transform: scaleY(1) translateX(150%); | |
| transform: scaleY(1) translateX(150%); | |
| } | |
| 26% { | |
| -webkit-transform: scaleY(0.3) translateX(150%); | |
| transform: scaleY(0.3) translateX(150%); | |
| } | |
| 26.66667% { | |
| -webkit-transform: scaleY(1) translateX(150%); | |
| transform: scaleY(1) translateX(150%); | |
| } | |
| 33.33333% { | |
| -webkit-transform: translateX(0) translateY(-170%); | |
| transform: translateX(0) translateY(-170%); | |
| } | |
| 36% { | |
| -webkit-transform: scaleY(1) translateY(-170%); | |
| transform: scaleY(1) translateY(-170%); | |
| } | |
| 36.66667% { | |
| -webkit-transform: scaleY(0.3) translateY(-170%); | |
| transform: scaleY(0.3) translateY(-170%); | |
| } | |
| 37.33333% { | |
| -webkit-transform: scaleY(1) translateY(-170%); | |
| transform: scaleY(1) translateY(-170%); | |
| } | |
| 38% { | |
| -webkit-transform: scaleY(1) translateY(-170%); | |
| transform: scaleY(1) translateY(-170%); | |
| } | |
| 38.66667% { | |
| -webkit-transform: scaleY(0.3) translateY(-170%); | |
| transform: scaleY(0.3) translateY(-170%); | |
| } | |
| 39.33333% { | |
| -webkit-transform: scaleY(1) translateY(-170%); | |
| transform: scaleY(1) translateY(-170%); | |
| } | |
| 53.33333% { | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| } | |
| 65.33333% { | |
| -webkit-transform: scaleY(1) translateY(0); | |
| transform: scaleY(1) translateY(0); | |
| } | |
| 66% { | |
| -webkit-transform: scaleY(0.3) translateY(0); | |
| transform: scaleY(0.3) translateY(0); | |
| } | |
| 66.66667% { | |
| -webkit-transform: scaleY(1) translateY(0); | |
| transform: scaleY(1) translateY(0); | |
| } | |
| 70% { | |
| -webkit-transform: scaleY(1) translateY(0); | |
| transform: scaleY(1) translateY(0); | |
| } | |
| 70.66667% { | |
| -webkit-transform: scaleY(0.3) translateY(0); | |
| transform: scaleY(0.3) translateY(0); | |
| } | |
| 71.33333% { | |
| -webkit-transform: scaleY(1) translateY(0); | |
| transform: scaleY(1) translateY(0); | |
| } | |
| } | |
| @-webkit-keyframes tongue { | |
| 46.66667% { | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| } | |
| 53.33333% { | |
| -webkit-transform: translateY(100%) rotate(10deg); | |
| transform: translateY(100%) rotate(10deg); | |
| } | |
| 73.33333% { | |
| -webkit-transform: translateY(100%) rotate(10deg); | |
| transform: translateY(100%) rotate(10deg); | |
| } | |
| 80% { | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes tongue { | |
| 46.66667% { | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| } | |
| 53.33333% { | |
| -webkit-transform: translateY(100%) rotate(10deg); | |
| transform: translateY(100%) rotate(10deg); | |
| } | |
| 73.33333% { | |
| -webkit-transform: translateY(100%) rotate(10deg); | |
| transform: translateY(100%) rotate(10deg); | |
| } | |
| 80% { | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| } | |
| } | |
| @-webkit-keyframes mouth-cover-left { | |
| 40% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 60% { | |
| -webkit-transform: rotate(90deg); | |
| transform: rotate(90deg); | |
| } | |
| 73.33333% { | |
| -webkit-transform: rotate(90deg); | |
| transform: rotate(90deg); | |
| } | |
| 86.66667% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| } | |
| @keyframes mouth-cover-left { | |
| 40% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 60% { | |
| -webkit-transform: rotate(90deg); | |
| transform: rotate(90deg); | |
| } | |
| 73.33333% { | |
| -webkit-transform: rotate(90deg); | |
| transform: rotate(90deg); | |
| } | |
| 86.66667% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| } | |
| @-webkit-keyframes mouth-cover-right { | |
| 40% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 60% { | |
| -webkit-transform: rotate(-90deg); | |
| transform: rotate(-90deg); | |
| } | |
| 73.33333% { | |
| -webkit-transform: rotate(-90deg); | |
| transform: rotate(-90deg); | |
| } | |
| 86.66667% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| } | |
| @keyframes mouth-cover-right { | |
| 40% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 60% { | |
| -webkit-transform: rotate(-90deg); | |
| transform: rotate(-90deg); | |
| } | |
| 73.33333% { | |
| -webkit-transform: rotate(-90deg); | |
| transform: rotate(-90deg); | |
| } | |
| 86.66667% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| } | |
| @-webkit-keyframes tail { | |
| 6.66667% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 10% { | |
| -webkit-transform: rotate(30deg); | |
| transform: rotate(30deg); | |
| } | |
| 13.33333% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 20% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 26.66667% { | |
| -webkit-transform: rotate(30deg); | |
| transform: rotate(30deg); | |
| } | |
| 46.66667% { | |
| -webkit-transform: rotate(30deg); | |
| transform: rotate(30deg); | |
| } | |
| 48.33333% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 50% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 50.83333% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 51.66667% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 52.5% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 53.33333% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 54.16667% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 55% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 55.83333% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 56.66667% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 57.5% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 58.33333% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 59.16667% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 60% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 60.83333% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 61.66667% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 62.5% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 63.33333% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 64.16667% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 65% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 65.83333% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 66.66667% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 67.5% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 68.33333% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 69.16667% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 70% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 70.83333% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 71.66667% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 72.5% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| } | |
| @keyframes tail { | |
| 6.66667% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 10% { | |
| -webkit-transform: rotate(30deg); | |
| transform: rotate(30deg); | |
| } | |
| 13.33333% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 20% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 26.66667% { | |
| -webkit-transform: rotate(30deg); | |
| transform: rotate(30deg); | |
| } | |
| 46.66667% { | |
| -webkit-transform: rotate(30deg); | |
| transform: rotate(30deg); | |
| } | |
| 48.33333% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 50% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 50.83333% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 51.66667% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 52.5% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 53.33333% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 54.16667% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 55% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 55.83333% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 56.66667% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 57.5% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 58.33333% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 59.16667% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 60% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 60.83333% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 61.66667% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 62.5% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 63.33333% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 64.16667% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 65% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 65.83333% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 66.66667% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 67.5% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 68.33333% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 69.16667% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 70% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 70.83333% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| 71.66667% { | |
| -webkit-transform: rotate(28deg); | |
| transform: rotate(28deg); | |
| } | |
| 72.5% { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0); | |
| } | |
| } | |
| @-webkit-keyframes left-ear { | |
| 0% { | |
| -webkit-transform: rotate(6deg); | |
| transform: rotate(6deg); | |
| } | |
| 6.66667% { | |
| -webkit-transform: rotate(6deg); | |
| transform: rotate(6deg); | |
| } | |
| 13.33333% { | |
| -webkit-transform: rotate(15deg); | |
| transform: rotate(15deg); | |
| } | |
| 26.66667% { | |
| -webkit-transform: rotate(15deg); | |
| transform: rotate(15deg); | |
| } | |
| 33.33333% { | |
| -webkit-transform: rotate(30deg); | |
| transform: rotate(30deg); | |
| } | |
| 40% { | |
| -webkit-transform: rotate(30deg); | |
| transform: rotate(30deg); | |
| } | |
| 46.66667% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 53.33333% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 60% { | |
| -webkit-transform: rotate(15deg); | |
| transform: rotate(15deg); | |
| } | |
| 80% { | |
| -webkit-transform: rotate(15deg); | |
| transform: rotate(15deg); | |
| } | |
| 93.33333% { | |
| -webkit-transform: rotate(6deg); | |
| transform: rotate(6deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotateZ(6deg); | |
| transform: rotateZ(6deg); | |
| } | |
| } | |
| @keyframes left-ear { | |
| 0% { | |
| -webkit-transform: rotate(6deg); | |
| transform: rotate(6deg); | |
| } | |
| 6.66667% { | |
| -webkit-transform: rotate(6deg); | |
| transform: rotate(6deg); | |
| } | |
| 13.33333% { | |
| -webkit-transform: rotate(15deg); | |
| transform: rotate(15deg); | |
| } | |
| 26.66667% { | |
| -webkit-transform: rotate(15deg); | |
| transform: rotate(15deg); | |
| } | |
| 33.33333% { | |
| -webkit-transform: rotate(30deg); | |
| transform: rotate(30deg); | |
| } | |
| 40% { | |
| -webkit-transform: rotate(30deg); | |
| transform: rotate(30deg); | |
| } | |
| 46.66667% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 53.33333% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 60% { | |
| -webkit-transform: rotate(15deg); | |
| transform: rotate(15deg); | |
| } | |
| 80% { | |
| -webkit-transform: rotate(15deg); | |
| transform: rotate(15deg); | |
| } | |
| 93.33333% { | |
| -webkit-transform: rotate(6deg); | |
| transform: rotate(6deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotateZ(6deg); | |
| transform: rotateZ(6deg); | |
| } | |
| } | |
| @-webkit-keyframes right-ear { | |
| 0% { | |
| -webkit-transform: rotateZ(-16deg) rotateY(180deg); | |
| transform: rotateZ(-16deg) rotateY(180deg); | |
| } | |
| 6.66667% { | |
| -webkit-transform: rotateZ(-16deg) rotateY(180deg); | |
| transform: rotateZ(-16deg) rotateY(180deg); | |
| } | |
| 13.33333% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 26.66667% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 33.33333% { | |
| -webkit-transform: rotateZ(-30deg) rotateY(180deg); | |
| transform: rotateZ(-30deg) rotateY(180deg); | |
| } | |
| 36.66667% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 37.33333% { | |
| -webkit-transform: rotateZ(-30deg) rotateY(180deg); | |
| transform: rotateZ(-30deg) rotateY(180deg); | |
| } | |
| 38% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 40% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 40.66667% { | |
| -webkit-transform: rotateZ(-30deg) rotateY(180deg); | |
| transform: rotateZ(-30deg) rotateY(180deg); | |
| } | |
| 41.33333% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 46.66667% { | |
| -webkit-transform: rotateZ(-9deg) rotateY(180deg); | |
| transform: rotateZ(-9deg) rotateY(180deg); | |
| } | |
| 53.33333% { | |
| -webkit-transform: rotateZ(-9deg) rotateY(180deg); | |
| transform: rotateZ(-9deg) rotateY(180deg); | |
| } | |
| 60% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 60.66667% { | |
| -webkit-transform: rotateZ(-30deg) rotateY(180deg); | |
| transform: rotateZ(-30deg) rotateY(180deg); | |
| } | |
| 61.33333% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 62.66667% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 63.33333% { | |
| -webkit-transform: rotateZ(-30deg) rotateY(180deg); | |
| transform: rotateZ(-30deg) rotateY(180deg); | |
| } | |
| 64% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 80% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 93.33333% { | |
| -webkit-transform: rotateZ(-16deg) rotateY(180deg); | |
| transform: rotateZ(-16deg) rotateY(180deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotateZ(-16deg) rotateY(180deg); | |
| transform: rotateZ(-16deg) rotateY(180deg); | |
| } | |
| } | |
| @keyframes right-ear { | |
| 0% { | |
| -webkit-transform: rotateZ(-16deg) rotateY(180deg); | |
| transform: rotateZ(-16deg) rotateY(180deg); | |
| } | |
| 6.66667% { | |
| -webkit-transform: rotateZ(-16deg) rotateY(180deg); | |
| transform: rotateZ(-16deg) rotateY(180deg); | |
| } | |
| 13.33333% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 26.66667% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 33.33333% { | |
| -webkit-transform: rotateZ(-30deg) rotateY(180deg); | |
| transform: rotateZ(-30deg) rotateY(180deg); | |
| } | |
| 36.66667% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 37.33333% { | |
| -webkit-transform: rotateZ(-30deg) rotateY(180deg); | |
| transform: rotateZ(-30deg) rotateY(180deg); | |
| } | |
| 38% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 40% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 40.66667% { | |
| -webkit-transform: rotateZ(-30deg) rotateY(180deg); | |
| transform: rotateZ(-30deg) rotateY(180deg); | |
| } | |
| 41.33333% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 46.66667% { | |
| -webkit-transform: rotateZ(-9deg) rotateY(180deg); | |
| transform: rotateZ(-9deg) rotateY(180deg); | |
| } | |
| 53.33333% { | |
| -webkit-transform: rotateZ(-9deg) rotateY(180deg); | |
| transform: rotateZ(-9deg) rotateY(180deg); | |
| } | |
| 60% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 60.66667% { | |
| -webkit-transform: rotateZ(-30deg) rotateY(180deg); | |
| transform: rotateZ(-30deg) rotateY(180deg); | |
| } | |
| 61.33333% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 62.66667% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 63.33333% { | |
| -webkit-transform: rotateZ(-30deg) rotateY(180deg); | |
| transform: rotateZ(-30deg) rotateY(180deg); | |
| } | |
| 64% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 80% { | |
| -webkit-transform: rotateZ(-19deg) rotateY(180deg); | |
| transform: rotateZ(-19deg) rotateY(180deg); | |
| } | |
| 93.33333% { | |
| -webkit-transform: rotateZ(-16deg) rotateY(180deg); | |
| transform: rotateZ(-16deg) rotateY(180deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotateZ(-16deg) rotateY(180deg); | |
| transform: rotateZ(-16deg) rotateY(180deg); | |
| } | |
| } | |
| *, *:before, *:after { | |
| -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important; | |
| animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important; | |
| } | |
| .husky { | |
| -webkit-animation: squiggly-anim 0.3s infinite; | |
| animation: squiggly-anim 0.3s infinite; | |
| height: 60vmin; | |
| width: 84vmin; | |
| } | |
| @media screen and (max-width: 400px) { | |
| .husky { | |
| -webkit-animation: none; | |
| animation: none; | |
| } | |
| } | |
| .husky:before { | |
| width: 90%; | |
| height: 0.5vmin; | |
| background: #30508F; | |
| border-radius: 0.5vmin; | |
| top: 100%; | |
| left: 5%; | |
| z-index: 2; | |
| } | |
| .husky:after { | |
| width: 100%; | |
| height: 10%; | |
| top: calc(100% + 0.5vmin); | |
| z-index: 3; | |
| background: #4F8EDB; | |
| } | |
| div:before, div:after { | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| } | |
| .head { | |
| -webkit-animation: head 12s none infinite; | |
| animation: head 12s none infinite; | |
| position: absolute; | |
| height: 45%; | |
| width: 58%; | |
| left: 34%; | |
| top: 5%; | |
| -webkit-transform-origin: bottom center; | |
| transform-origin: bottom center; | |
| } | |
| .head:before { | |
| background: #30508F; | |
| border-top-left-radius: 50% 40%; | |
| border-top-right-radius: 50% 40%; | |
| border-bottom-right-radius: 10% 60%; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .face { | |
| -webkit-animation: face 12s none infinite; | |
| animation: face 12s none infinite; | |
| position: absolute; | |
| width: 98%; | |
| height: 62%; | |
| top: 15%; | |
| left: 2%; | |
| } | |
| .face:before { | |
| z-index: 1; | |
| width: 94%; | |
| height: 70%; | |
| left: 3%; | |
| background-color: white; | |
| bottom: 5%; | |
| border-top-left-radius: 40% 50%; | |
| border-top-right-radius: 40% 50%; | |
| border-bottom-left-radius: 30% 50%; | |
| border-bottom-right-radius: 30% 40%; | |
| } | |
| .eye { | |
| -webkit-animation: eyes 12s none infinite; | |
| animation: eyes 12s none infinite; | |
| position: absolute; | |
| width: 30%; | |
| height: 40%; | |
| background-color: white; | |
| right: 45%; | |
| border-top-left-radius: 55% 50%; | |
| border-top-right-radius: 45% 50%; | |
| z-index: 2; | |
| } | |
| .eye:before { | |
| -webkit-animation: left-eye 12s none infinite; | |
| animation: left-eye 12s none infinite; | |
| height: 15%; | |
| width: 15%; | |
| border-radius: 100%; | |
| background: #343C60; | |
| top: 45%; | |
| left: 45%; | |
| -webkit-transform-origin: center center; | |
| transform-origin: center center; | |
| } | |
| .eye + .eye { | |
| z-index: 1; | |
| right: initial; | |
| left: 48%; | |
| border-top-right-radius: 55% 50%; | |
| border-top-left-radius: 45% 50%; | |
| } | |
| .nose { | |
| -webkit-animation: nose 12s none infinite; | |
| animation: nose 12s none infinite; | |
| z-index: 2; | |
| position: absolute; | |
| width: 20%; | |
| height: 20%; | |
| top: 29%; | |
| left: 42%; | |
| } | |
| .nose:after { | |
| background: #30508F; | |
| height: 100%; | |
| width: 100%; | |
| border-top-left-radius: 20% 20%; | |
| border-top-right-radius: 30% 20%; | |
| border-bottom-right-radius: 55% 80%; | |
| border-bottom-left-radius: 50% 80%; | |
| } | |
| .nose:before { | |
| height: 100%; | |
| width: 200%; | |
| background: white; | |
| top: 50%; | |
| left: -50%; | |
| z-index: -1; | |
| border-radius: 50%; | |
| } | |
| .ear { | |
| -webkit-animation: left-ear 12s both infinite; | |
| animation: left-ear 12s both infinite; | |
| position: absolute; | |
| top: 3%; | |
| left: -10%; | |
| width: 48%; | |
| height: 30%; | |
| border-bottom-left-radius: 100% 90%; | |
| border-top-left-radius: 10%; | |
| -webkit-transform-origin: 80% center; | |
| transform-origin: 80% center; | |
| overflow: hidden; | |
| background: #30508F; | |
| } | |
| .ear:before { | |
| width: 70%; | |
| height: 55%; | |
| border: 2px solid #30508F; | |
| background: #DE6465; | |
| top: 20%; | |
| left: 15%; | |
| -webkit-transform-origin: top left; | |
| transform-origin: top left; | |
| -webkit-transform: skewX(30deg) rotate(-5deg); | |
| transform: skewX(30deg) rotate(-5deg); | |
| } | |
| .ear:after { | |
| width: 70%; | |
| height: 100%; | |
| border-top-left-radius: 100%; | |
| background: #30508F; | |
| left: 32%; | |
| -webkit-transform-origin: top left; | |
| transform-origin: top left; | |
| -webkit-transform: rotate(-5deg); | |
| transform: rotate(-5deg); | |
| } | |
| .ear + .ear { | |
| -webkit-animation: right-ear 12s both infinite; | |
| animation: right-ear 12s both infinite; | |
| background-color: #343C60; | |
| left: 15%; | |
| top: 5%; | |
| z-index: -1; | |
| -webkit-transform-origin: right center; | |
| transform-origin: right center; | |
| } | |
| .ear + .ear:before { | |
| border-color: #343C60; | |
| } | |
| .ear + .ear:after { | |
| background: #343C60; | |
| } | |
| .mouth { | |
| z-index: 1; | |
| -webkit-animation: mouth 12s none infinite; | |
| animation: mouth 12s none infinite; | |
| position: absolute; | |
| width: 48%; | |
| height: 55%; | |
| bottom: -5%; | |
| left: 28%; | |
| overflow: hidden; | |
| } | |
| .mouth:before, .mouth:after { | |
| -webkit-animation: mouth-cover-left 12s none infinite; | |
| animation: mouth-cover-left 12s none infinite; | |
| width: 28%; | |
| height: 100%; | |
| background: white; | |
| top: -50%; | |
| left: 0; | |
| z-index: 3; | |
| -webkit-transform-origin: right top; | |
| transform-origin: right top; | |
| } | |
| .mouth:after { | |
| -webkit-animation: mouth-cover-right 12s none infinite; | |
| animation: mouth-cover-right 12s none infinite; | |
| left: initial; | |
| right: 0; | |
| -webkit-transform-origin: left top; | |
| transform-origin: left top; | |
| } | |
| .lips { | |
| z-index: 2; | |
| height: 35%; | |
| width: 100%; | |
| } | |
| .lips:before, .lips:after { | |
| background: white; | |
| width: calc(50% + 1.5px); | |
| border-color: #9EB6D7; | |
| border-width: 3px; | |
| border-style: solid; | |
| height: 100%; | |
| border-bottom-left-radius: 65% 100%; | |
| border-bottom-right-radius: 35% 50%; | |
| border-top-right-radius: 50%; | |
| border-right-color: transparent; | |
| border-top-color: transparent; | |
| } | |
| .lips:after { | |
| -webkit-transform: rotateY(180deg); | |
| transform: rotateY(180deg); | |
| left: initial; | |
| right: 0; | |
| } | |
| .tongue { | |
| -webkit-animation: tongue 12s none infinite; | |
| animation: tongue 12s none infinite; | |
| position: absolute; | |
| height: 100%; | |
| width: 44%; | |
| background: #DE6465; | |
| left: 25%; | |
| bottom: 100%; | |
| z-index: 1; | |
| border-bottom-left-radius: 50% 20%; | |
| border-bottom-right-radius: 50% 20%; | |
| } | |
| .body { | |
| -webkit-animation: body 12s none infinite; | |
| animation: body 12s none infinite; | |
| width: 45%; | |
| height: 100%; | |
| position: absolute; | |
| left: 25%; | |
| } | |
| .torso { | |
| position: absolute; | |
| height: 55%; | |
| width: 100%; | |
| bottom: 0; | |
| } | |
| .torso:before { | |
| background: #30508F; | |
| height: 100%; | |
| width: 50%; | |
| -webkit-transform: translateX(-20%) skewX(-30deg); | |
| transform: translateX(-20%) skewX(-30deg); | |
| -webkit-transform-origin: left bottom; | |
| transform-origin: left bottom; | |
| border-radius: 0 30% 0 60%; | |
| } | |
| .torso:after { | |
| background: #30508F; | |
| height: 100%; | |
| width: 60%; | |
| top: 0; | |
| right: 0; | |
| border-radius: 10% 40% 60% 0; | |
| } | |
| .mane { | |
| -webkit-animation: mane 12s none infinite; | |
| animation: mane 12s none infinite; | |
| z-index: 2; | |
| position: absolute; | |
| width: 31.5%; | |
| height: 30%; | |
| top: 44%; | |
| left: 37%; | |
| } | |
| .mane:before { | |
| background: white; | |
| height: 40%; | |
| width: 100%; | |
| border-top-left-radius: 10% 50%; | |
| border-top-right-radius: 20% 100%; | |
| border-bottom-left-radius: 10% 50%; | |
| } | |
| .mane:after { | |
| background: white; | |
| top: 25%; | |
| height: 76%; | |
| width: 30%; | |
| right: 23%; | |
| border-top-right-radius: 100% 80%; | |
| -webkit-transform: rotate(47deg); | |
| transform: rotate(47deg); | |
| -webkit-transform-origin: bottom right; | |
| transform-origin: bottom right; | |
| } | |
| .coat { | |
| position: absolute; | |
| width: 50%; | |
| height: 50%; | |
| background: white; | |
| -webkit-transform-origin: bottom right; | |
| transform-origin: bottom right; | |
| left: 10%; | |
| top: 21%; | |
| -webkit-transform: rotate(25deg) skewX(-30deg); | |
| transform: rotate(25deg) skewX(-30deg); | |
| } | |
| .legs { | |
| background-color: #30508F; | |
| position: absolute; | |
| height: 30%; | |
| width: 42%; | |
| left: 23%; | |
| bottom: 0; | |
| border-top-left-radius: 20% 37%; | |
| border-bottom-left-radius: 10% 37%; | |
| border-top-right-radius: 50%; | |
| z-index: 1; | |
| } | |
| .front-legs { | |
| position: absolute; | |
| width: 55%; | |
| height: 117%; | |
| bottom: 0; | |
| right: -12%; | |
| } | |
| .front-legs:before { | |
| width: 4%; | |
| height: 6%; | |
| background: transparent; | |
| bottom: 0; | |
| left: 47%; | |
| box-shadow: -1.3vmin 0 0 #9EB6D7, -2.8vmin 0 0 #9EB6D7, 1.3vmin 0 0 #4F8EDB, 2.8vmin 0 0 #4F8EDB; | |
| z-index: 2; | |
| } | |
| .front-legs > .leg { | |
| width: 51%; | |
| height: 100%; | |
| position: absolute; | |
| bottom: 0; | |
| right: 50%; | |
| overflow: hidden; | |
| } | |
| .front-legs > .leg:before { | |
| background: #C8DAF2; | |
| height: 100%; | |
| width: 100%; | |
| -webkit-transform: skewY(-30deg) skewX(10deg); | |
| transform: skewY(-30deg) skewX(10deg); | |
| -webkit-transform-origin: top right; | |
| transform-origin: top right; | |
| } | |
| .front-legs > .leg + .leg { | |
| right: 0; | |
| -webkit-transform: rotateY(180deg); | |
| transform: rotateY(180deg); | |
| } | |
| .front-legs > .leg + .leg:before { | |
| background: #9EB6D7; | |
| } | |
| .hind-leg { | |
| position: absolute; | |
| background: #9EB6D7; | |
| width: 35%; | |
| height: 25%; | |
| border-top-left-radius: 35% 100%; | |
| border-top-right-radius: 40% 100%; | |
| bottom: 0%; | |
| right: 45%; | |
| } | |
| .hind-leg:before { | |
| width: 6%; | |
| height: 20%; | |
| background: transparent; | |
| bottom: 0; | |
| left: 70%; | |
| box-shadow: -0.8vmin 0 0 #4F8EDB, 0.8vmin 0 0 #4F8EDB; | |
| } | |
| .tail { | |
| position: absolute; | |
| width: 15%; | |
| height: 6%; | |
| bottom: 0; | |
| right: 72%; | |
| background: #343C60; | |
| z-index: 0; | |
| } | |
| .tail > .tail { | |
| -webkit-animation: tail 12s none infinite; | |
| animation: tail 12s none infinite; | |
| height: 100%; | |
| width: 4vmin; | |
| right: 26%; | |
| -webkit-transform-origin: center right; | |
| transform-origin: center right; | |
| border-top-left-radius: 50% 50%; | |
| border-bottom-left-radius: 50% 50%; | |
| -webkit-transform: rotate(26deg); | |
| transform: rotate(26deg); | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| .husky > .tail { | |
| border-top-left-radius: 10% 50%; | |
| border-bottom-left-radius: 10% 50%; | |
| } | |
| .husky > .tail > .tail { | |
| right: 88%; | |
| } | |
| @-webkit-keyframes squiggly-anim { | |
| 0% { | |
| -webkit-filter: url("#squiggly-0"); | |
| filter: url("#squiggly-0"); | |
| } | |
| 25% { | |
| -webkit-filter: url("#squiggly-1"); | |
| filter: url("#squiggly-1"); | |
| } | |
| 50% { | |
| -webkit-filter: url("#squiggly-2"); | |
| filter: url("#squiggly-2"); | |
| } | |
| 75% { | |
| -webkit-filter: url("#squiggly-3"); | |
| filter: url("#squiggly-3"); | |
| } | |
| 100% { | |
| -webkit-filter: url("#squiggly-4"); | |
| filter: url("#squiggly-4"); | |
| } | |
| } | |
| @keyframes squiggly-anim { | |
| 0% { | |
| -webkit-filter: url("#squiggly-0"); | |
| filter: url("#squiggly-0"); | |
| } | |
| 25% { | |
| -webkit-filter: url("#squiggly-1"); | |
| filter: url("#squiggly-1"); | |
| } | |
| 50% { | |
| -webkit-filter: url("#squiggly-2"); | |
| filter: url("#squiggly-2"); | |
| } | |
| 75% { | |
| -webkit-filter: url("#squiggly-3"); | |
| filter: url("#squiggly-3"); | |
| } | |
| 100% { | |
| -webkit-filter: url("#squiggly-4"); | |
| filter: url("#squiggly-4"); | |
| } | |
| } | |
| html, body { | |
| background-repeat: no-repeat; | |
| background-size: contain; | |
| background-position: center center; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-orient: vertical; | |
| -webkit-box-direction: normal; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -webkit-box-pack: center; | |
| -webkit-justify-content: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| -webkit-box-align: center; | |
| -webkit-align-items: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| background-color: #4F8EDB; | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| *, *:before, *:after { | |
| box-sizing: border-box; | |
| position: relative; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment