├── .gitignore ├── README.md ├── css ├── demo.css ├── fox.css ├── fox.css.map ├── husky.css ├── husky.css.map └── normalize.css ├── favicon.ico ├── fonts └── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.svg │ ├── codropsicons.ttf │ ├── codropsicons.woff │ └── license.txt ├── img ├── landscape.jpg ├── link-fox.png └── link-husky.png ├── index.html ├── index2.html └── scss ├── __svg.scss ├── fox.scss └── husky.scss /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | node_modules/ 3 | .sass-cache/ 4 | package.json 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Animated Animals 2 | 3 | Demo for the tutorial on how to animate two SVG animals using only CSS (SCSS). By David Khourshid. 4 | 5 | [Article on Codrops](http://tympanus.net/codrops/?p=26337) 6 | 7 | [Demo](http://tympanus.net/Tutorials/AnimatedAnimals/) 8 | 9 | ## License 10 | 11 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 12 | 13 | Read more here: [License](http://tympanus.net/codrops/licensing/) 14 | 15 | ## Credits 16 | 17 | - [Husky love.](https://dribbble.com/shots/2418721-Husky-love) by Ryan Rumbolt (Illustration by [Alexey Kuvaldin)](https://dribbble.com/kuvaldin) 18 | - Fox design based on a [short film by Ari Gibson and Jason Pamment](https://vimeo.com/44088118) 19 | - [Sass-SVG](https://github.com/davidkpiano/sass-svg) 20 | - [Squiggly Text](http://codepen.io/lbebber/details/KwGEQv/) by [Lucas Bebber](https://twitter.com/lucasbebber) 21 | 22 | ## Misc 23 | 24 | Follow *David Khourshid*: [Twitter](https://twitter.com/davidkpiano), [CodePen](https://codepen.io/davidkpiano), [GitHub](https://github.com/davidkpiano) 25 | 26 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/) 27 | 28 | [© Codrops 2016](http://www.codrops.com) 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-weight: normal; 3 | font-style: normal; 4 | font-family: 'codropsicons'; 5 | src:url('../fonts/codropsicons/codropsicons.eot'); 6 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 7 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 8 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 9 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 10 | } 11 | 12 | *, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; } 13 | 14 | body { 15 | font-family: Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif; 16 | color: #444; 17 | background: #f6f6f6; 18 | -webkit-font-smoothing: antialiased; 19 | -moz-osx-font-smoothing: grayscale; 20 | } 21 | 22 | a { 23 | outline: none; 24 | color: #fff; 25 | text-decoration: none; 26 | } 27 | 28 | a:hover, a:focus { 29 | color: #2C2F36; 30 | outline: none; 31 | } 32 | 33 | .info { 34 | display: none; 35 | max-width: 300px; 36 | font-weight: bold; 37 | color: #d14684; 38 | background: #fff; 39 | border-radius: 15px; 40 | padding: 1em; 41 | margin: 1em auto; 42 | } 43 | 44 | .hidden { 45 | position: absolute; 46 | overflow: hidden; 47 | width: 0; 48 | height: 0; 49 | pointer-events: none; 50 | } 51 | 52 | .container { 53 | overflow: hidden; 54 | width: 100vw; 55 | height: 100vh; 56 | } 57 | 58 | /* Header */ 59 | .codrops-header { 60 | padding: 2em 1em 4em; 61 | text-align: center; 62 | z-index: 100; 63 | } 64 | 65 | .codrops-header h1 { 66 | margin: 0.5em 0 0; 67 | letter-spacing: -1px; 68 | font-size: 4em; 69 | line-height: 1; 70 | font-family: 'Freckle Face', cursive; 71 | font-weight: 400; 72 | color: #fff; 73 | } 74 | 75 | /* Top Navigation Style */ 76 | .codrops-links { 77 | position: relative; 78 | display: inline-block; 79 | text-align: center; 80 | white-space: nowrap; 81 | } 82 | 83 | .codrops-links::after { 84 | position: absolute; 85 | top: 0; 86 | left: 50%; 87 | width: 1px; 88 | height: 100%; 89 | background: rgba(0,0,0,0.1); 90 | content: ''; 91 | -webkit-transform: rotate3d(0,0,1,22.5deg); 92 | transform: rotate3d(0,0,1,22.5deg); 93 | } 94 | 95 | .codrops-icon { 96 | display: inline-block; 97 | margin: 0.5em; 98 | padding: 0em 0; 99 | width: 1.5em; 100 | text-decoration: none; 101 | } 102 | 103 | .codrops-icon span { 104 | display: none; 105 | } 106 | 107 | .codrops-icon::before { 108 | margin: 0 5px; 109 | text-transform: none; 110 | font-weight: normal; 111 | font-style: normal; 112 | font-variant: normal; 113 | font-family: 'codropsicons'; 114 | line-height: 1; 115 | speak: none; 116 | -webkit-font-smoothing: antialiased; 117 | } 118 | 119 | .codrops-icon--drop::before { 120 | content: "\e001"; 121 | color: #0099cc; 122 | } 123 | 124 | .codrops-icon--prev::before { 125 | content: "\e004"; 126 | } 127 | 128 | /* Demo links */ 129 | .codrops-demos { 130 | margin: 2em 0 0; 131 | } 132 | 133 | .codrops-demos a { 134 | display: inline-block; 135 | margin: 0 0.5em; 136 | font-weight: bold; 137 | } 138 | 139 | .codrops-demos a img { 140 | display: block; 141 | border-radius: 50%; 142 | border: 5px solid #fff; 143 | opacity: 0.9; 144 | } 145 | 146 | .codrops-demos a:focus img, 147 | .codrops-demos a:hover img { 148 | opacity: 1; 149 | } 150 | 151 | .codrops-demos a.current-demo img { 152 | opacity: 0.5; 153 | } 154 | 155 | /* Content */ 156 | .content { 157 | padding: 3em 0; 158 | } 159 | 160 | @media screen and (max-width: 40em) { 161 | .codrops-header h1 { 162 | font-size: 2.8em; 163 | } 164 | .info { 165 | display: block; 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /css/fox.css: -------------------------------------------------------------------------------- 1 | *, *:before, *:after { 2 | position: relative; 3 | } 4 | 5 | body { 6 | background: white; 7 | } 8 | 9 | .codrops-header h1 { 10 | -webkit-animation: squigglevision 0.3s infinite; 11 | animation: squigglevision 0.3s infinite; 12 | -webkit-animation-timing-function: cubic-bezier(0, 0, 0.8, 0.9); 13 | animation-timing-function: cubic-bezier(0, 0, 0.8, 0.9); 14 | } 15 | 16 | .content--fox { 17 | background: #99bfcf url("../img/landscape.jpg") no-repeat 50% 100%; 18 | background-size: cover; 19 | position: absolute; 20 | pointer-events: none; 21 | top: 0; 22 | width: 100%; 23 | height: 100vh; 24 | overflow: hidden; 25 | left: 50%; 26 | -webkit-transform: translateX(-50%); 27 | transform: translateX(-50%); 28 | } 29 | .content--fox:after { 30 | content: ''; 31 | position: absolute; 32 | top: 0; 33 | left: 0; 34 | width: 100%; 35 | height: 100%; 36 | background-position: bottom center; 37 | background-repeat: no-repeat; 38 | background-size: cover; 39 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%201290%20900%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%237e8841%22%20d%3D%22M1290%2C764%2E1V900H0V722c115%2E2%2C0%2C514%2E2%2C135%2E7%2C698%2C134%2E8C903%2E5%2C855%2E7%2C1223%2E5%2C764%2E1%2C1290%2C764%2E1z%22%2F%3E%3Cpath%20fill%3D%22%234f6333%22%20d%3D%22M6%2C900c0%2C0%2C209%2E1%2D96%2E7%2C417%2E9%2D88%2E5c180%2E9%2C7%2E1%2C230%2E7%2C64%2E4%2C442%2E4%2C60%2E9c68%2E2%2D1%2E1%2C126%2E6%2D8%2E1%2C233%2E7%2D1%2E5c71%2E8%2C4%2E5%2C190%2C29%2C190%2C29H6z%22%2F%3E%3C%2Fsvg%3E"); 40 | } 41 | 42 | .fox { 43 | position: absolute; 44 | height: 26.25vmax; 45 | width: 18.2vmax; 46 | -webkit-animation: fox 17s none, squigglevision 0.3s infinite; 47 | animation: fox 17s none, squigglevision 0.3s infinite; 48 | -webkit-animation-timing-function: cubic-bezier(0, 0, 0.8, 0.9); 49 | animation-timing-function: cubic-bezier(0, 0, 0.8, 0.9); 50 | bottom: 2.5vmax; 51 | left: 60%; 52 | -webkit-transform-origin: bottom right; 53 | transform-origin: bottom right; 54 | } 55 | .fox *, .fox *:before, .fox *:after { 56 | -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important; 57 | animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important; 58 | } 59 | .fox * { 60 | position: absolute; 61 | background-size: contain; 62 | background-repeat: no-repeat; 63 | -webkit-transform-style: preserve-3d; 64 | transform-style: preserve-3d; 65 | } 66 | .fox *:before, .fox *:after { 67 | content: ''; 68 | position: absolute; 69 | display: block; 70 | background-size: contain; 71 | background-repeat: no-repeat; 72 | height: 100%; 73 | width: 100%; 74 | } 75 | 76 | .fox-head { 77 | -webkit-transform: translateZ(200px); 78 | transform: translateZ(200px); 79 | -webkit-animation: head 17s forwards; 80 | animation: head 17s forwards; 81 | height: 11.76vmax; 82 | width: 11.76vmax; 83 | top: 0; 84 | left: 0; 85 | } 86 | 87 | .fox-face { 88 | -webkit-perspective: 70vmax; 89 | perspective: 70vmax; 90 | } 91 | .fox-face, .fox-face > * { 92 | height: 100%; 93 | width: 100%; 94 | background-size: contain; 95 | } 96 | 97 | .fox-ears { 98 | -webkit-transform: translateZ(-5.88vmax); 99 | transform: translateZ(-5.88vmax); 100 | -webkit-animation: ears 17s infinite none; 101 | animation: ears 17s infinite none; 102 | } 103 | 104 | .fox-ear { 105 | height: 100%; 106 | width: 100%; 107 | } 108 | 109 | .fox-ear:first-child { 110 | -webkit-animation: ear-left 17s infinite none; 111 | animation: ear-left 17s infinite none; 112 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20168%20168%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23df6951%22%20d%3D%22M48%2E7%2C84%2E4c0%2C0%2D35%2E5%2C4%2E6%2D40%2D10%2E8s%2D8%2D57%2E2%2D2%2E5%2D70%2E9c0%2C0%2C66%2E7%2C34%2C66%2E7%2C52S48%2E7%2C84%2E4%2C48%2E7%2C84%2E4z%22%2F%3E%3C%2Fsvg%3E"); 113 | } 114 | 115 | .fox-ear:last-child { 116 | -webkit-animation: ear-right 17s infinite none; 117 | animation: ear-right 17s infinite none; 118 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20168%20168%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23df6951%22%20d%3D%22M118%2E8%2C84%2E4c0%2C0%2C35%2E5%2C4%2E6%2C40%2D10%2E8s8%2D57%2E2%2C2%2E5%2D70%2E9c0%2C0%2D66%2E8%2C34%2D66%2E8%2C52S118%2E8%2C84%2E4%2C118%2E8%2C84%2E4z%22%2F%3E%3C%2Fsvg%3E"); 119 | } 120 | 121 | .fox-skull { 122 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20168%20168%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23e37c67%22%20id%3D%22circle%22%20d%3D%22M83%2E7%2C157%2E4c11%2E3%2C0%2C77%2E9%2D2%2E3%2C77%2E9%2D39%2E3c0%2C0%2C3%2E7%2C1%2C3%2E7%2C4%2E3c0%2C0%2C2%2E1%2D3%2E3%2C2%2E1%2D10%2E3s%2D9%2E3%2D78%2E2%2D83%2E7%2D78%2E2%20%20%20S0%2C105%2E1%2C0%2C112%2E1s2%2E1%2C10%2E3%2C2%2E1%2C10%2E3c0%2D3%2E3%2C3%2E7%2D4%2E3%2C3%2E7%2D4%2E3C5%2E8%2C155%2E1%2C72%2E4%2C157%2E4%2C83%2E7%2C157%2E4z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M83%2E7%2C139%2E9c38%2E2%2C0%2C40%2E1%2C6%2E9%2C40%2E1%2C6%2E9v5%2E7c%2D1%2E2%2C4%2E9%2D35%2E2%2C7%2E4%2D40%2E1%2C7%2E4s%2D39%2D2%2E6%2D40%2E1%2D7%2E4v%2D5%2E7%20%20%20C43%2E6%2C146%2E9%2C45%2E5%2C139%2E9%2C83%2E7%2C139%2E9z%22%2F%3E%3C%2Fsvg%3E"); 123 | background-size: contain; 124 | } 125 | 126 | .fox-front { 127 | -webkit-animation: front 17s infinite none; 128 | animation: front 17s infinite none; 129 | -webkit-transform-origin: bottom center; 130 | transform-origin: bottom center; 131 | } 132 | .fox-front:after { 133 | -webkit-animation: front-after 17s infinite none; 134 | animation: front-after 17s infinite none; 135 | -webkit-transform-origin: bottom right; 136 | transform-origin: bottom right; 137 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20168%20168%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M83%2E7%2C154%2E4c14%2C0%2C71%2C0%2E1%2C70%2E3%2D38%2E5l3%2E8%2D1%2E5c0%2C0%2D24%2E1%2D35%2E5%2D74%2D35%2E5s%2D74%2C35%2E5%2D74%2C35%2E5l3%2E8%2C1%2E5%20%20%20C12%2E7%2C154%2E5%2C69%2E7%2C154%2E4%2C83%2E7%2C154%2E4z%22%2F%3E%3C%2Fsvg%3E"); 138 | } 139 | .fox-front:before { 140 | -webkit-animation: front-before 17s infinite none; 141 | animation: front-before 17s infinite none; 142 | -webkit-transform-origin: right top; 143 | transform-origin: right top; 144 | height: 5.67vmax; 145 | width: 7.7vmax; 146 | bottom: 0.56vmax; 147 | left: -1.82vmax; 148 | -webkit-transform: rotateY(90deg); 149 | transform: rotateY(90deg); 150 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%22%2D337%20181%2E6%20115%2E7%2081%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M%2D221%2E3%2C183%2E1c%2D33%2E5%2D3%2D115%2E7%2D2%2D115%2E7%2C7c0%2C40%2E5%2C69%2E3%2C49%2E1%2C79%2E2%2C59c13%2E1%2C13%2E1%2C36%2E5%2C13%2E5%2C36%2E5%2C13%2E5V183%2E1z%22%2F%3E%3C%2Fsvg%3E"); 151 | } 152 | 153 | .fox-nose { 154 | -webkit-animation: nose 17s infinite none; 155 | animation: nose 17s infinite none; 156 | } 157 | .fox-nose:before { 158 | -webkit-transform: translateZ(10.5vmax) scale(0.8); 159 | transform: translateZ(10.5vmax) scale(0.8); 160 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20168%20168%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23575A57%22%20d%3D%22M83%2E7%2C86%2E7c3%2E3%2C0%2C11%2E6%2D3%2E9%2C11%2E6%2D7%2E1c0%2D3%2E2%2D9%2E4%2D3%2E2%2D11%2E6%2D3%2E2c%2D2%2E2%2C0%2D11%2E6%2C0%2D11%2E6%2C3%2E2%20%20%20C72%2E1%2C82%2E8%2C80%2E4%2C86%2E7%2C83%2E7%2C86%2E7z%22%2F%3E%3Cpath%20stroke%3D%22%23575A57%22%20d%3D%22M83%2E7%2C102%2E3V86%2E7%22%2F%3E%3Cpath%20stroke%3D%22%23575A57%22%20fill%3D%22none%22%20d%3D%22M94%2E5%2C104%2E9c0%2C0%2D5%2E2%2D2%2E7%2D10%2E8%2D2%2E7c%2D5%2E6%2C0%2D10%2E8%2C2%2E7%2D10%2E8%2C2%2E7%22%2F%3E%3C%2Fsvg%3E"); 161 | } 162 | 163 | .fox-eyes { 164 | -webkit-animation: eyes 17s infinite none; 165 | animation: eyes 17s infinite none; 166 | -webkit-transform-origin: center 4.9vmax; 167 | transform-origin: center 4.9vmax; 168 | } 169 | .fox-eyes:before { 170 | -webkit-transform: translateZ(7.0vmax) scale(0.8); 171 | transform: translateZ(7.0vmax) scale(0.8); 172 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20168%20168%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2258%2E9%22%20cy%3D%2268%22%20r%3D%225%2E4%22%2F%3E%3Ccircle%20cx%3D%22108%2E6%22%20cy%3D%2268%22%20r%3D%225%2E4%22%2F%3E%3C%2Fsvg%3E"); 173 | } 174 | 175 | .fox-body { 176 | -webkit-perspective: 70vmax; 177 | perspective: 70vmax; 178 | -webkit-animation: body 17s forwards; 179 | animation: body 17s forwards; 180 | height: 17.22vmax; 181 | width: 11.2vmax; 182 | top: 7.7vmax; 183 | left: 2.52vmax; 184 | -webkit-transform-origin: top center; 185 | transform-origin: top center; 186 | } 187 | 188 | .fox-body:before { 189 | height: 100%; 190 | width: 100%; 191 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20160%20246%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23e37c67%22%20d%3D%22M94%2E5%2C50%2E8c0%2C33%2C22%2E5%2C66%2E8%2C33%2E3%2C77%2E7s32%2E3%2C40%2E3%2C32%2E3%2C71%2E7s%2D14%2E3%2C46%2D32%2E8%2C46c%2D42%2E5%2C0%2D103%2E8%2D71%2E7%2D103%2E8%2D114%2E7%20%20%20%20S17%2E1%2C47%2E8%2C2%2E9%2C33%2E6S29%2E1%2C0%2C51%2E5%2C0s60%2E2%2C13%2C60%2E2%2C21%2E9S94%2E5%2C33%2E8%2C94%2E5%2C50%2E8z%22%2F%3E%3Cpath%20fill%3D%22%23E1E1E1%22%20d%3D%22M107%2E4%2C241%2E7C67%2E9%2C225%2E4%2C23%2E5%2C168%2C23%2E5%2C131%2E4c0%2D43%2D6%2E4%2D83%2E6%2D20%2E5%2D97%2E8S29%2E1%2C0%2C51%2E5%2C0s41%2E2%2C13%2C41%2E2%2C21%2E9%20%20%20%20S77%2E8%2C53%2E8%2C77%2E8%2C70%2E8c0%2C33%2C10%2E2%2C51%2E5%2C21%2E1%2C62%2E3s25%2E6%2C55%2E7%2C25%2E6%2C70%2E3C124%2E4%2C222%2E8%2C107%2E4%2C241%2E7%2C107%2E4%2C241%2E7z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%2C26%2E5c0%2C16%2E2%2C17%2E6%2C25%2E2%2C17%2E5%2C52%2E9c%2D0%2E1%2C20%2D4%2E7%2C29%2E9%2D4%2E7%2C43%2E6s6%2E6%2C48%2C37%2E6%2C56%2E4c0%2C0%2C0%2E7%2D5%2C3%2E7%2D5%20%20%20%20s8%2C7%2E3%2C14%2E3%2C7%2E3c0%2C0%2D0%2E7%2D5%2E7%2C1%2E7%2D5%2E7s5%2E5%2C4%2E3%2C9%2E9%2C4%2E3c0%2C0%2D1%2E7%2D8%2E9%2C2%2E6%2D13%2E2c0%2C0%2C0%2E5%2C3%2C2%2E5%2C3c0%2C0%2C1%2E8%2D5%2C4%2E5%2D6%2E5s9%2E2%2D8%2E8%2C9%2E2%2D14%2E8%20%20%20%20s%2D18%2E8%2D44%2E9%2D18%2E8%2D70%2E8s12%2E6%2D32%2E5%2C12%2E6%2D53%2E5S58%2E9%2C0%2C47%2E4%2C0S0%2C9%2C0%2C26%2E5z%22%2F%3E%3C%2Fsvg%3E"); 192 | } 193 | 194 | .fox-front-leg { 195 | top: 8.4vmax; 196 | left: 1.05vmax; 197 | height: 9.1vmax; 198 | width: 2.94vmax; 199 | -webkit-transform-origin: center top; 200 | transform-origin: center top; 201 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2042%20130%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23e37c67%22%20d%3D%22M22%2E6%2C97%2E5c15%2E2%2C0%2C16%2D32%2C16%2D32S37%2E8%2C42%2C41%2E3%2C31S19%2E4%2C0%2C7%2E6%2C0C%2D4%2E1%2C0%2C0%2E3%2C20%2C3%2E8%2C31s2%2E8%2C34%2E5%2C2%2E8%2C34%2E5%20%20%20%20S7%2E3%2C97%2E5%2C22%2E6%2C97%2E5z%22%2F%3E%3C%2Fsvg%3E"); 202 | } 203 | .fox-front-leg:before, .fox-front-leg:after { 204 | -webkit-transform-origin: 2.8vmax 63%; 205 | transform-origin: 2.8vmax 63%; 206 | height: 100%; 207 | width: 100%; 208 | } 209 | .fox-front-leg:before { 210 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2042%20130%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23e37c67%22%20d%3D%22M22%2E6%2C129%2E7c9%2E5%2C0%2C11%2E2%2D7%2E3%2C11%2E2%2D9%2E3s2%2E2%2D36%2E2%2C0%2D40%2E5c%2D2%2E2%2D4%2E3%2D2%2E5%2D6%2E3%2D11%2E2%2D6%2E3s%2D9%2C2%2D11%2E2%2C6%2E3%20%20%20%20c%2D2%2E2%2C4%2E3%2C0%2C38%2E5%2C0%2C40%2E5S13%2E1%2C129%2E7%2C22%2E6%2C129%2E7z%22%2F%3E%3C%2Fsvg%3E"); 211 | } 212 | .fox-front-leg:first-child { 213 | z-index: -1; 214 | -webkit-animation: upper-left-leg 17s forwards; 215 | animation: upper-left-leg 17s forwards; 216 | } 217 | .fox-front-leg:first-child:before { 218 | -webkit-animation: lower-left-leg 17s forwards; 219 | animation: lower-left-leg 17s forwards; 220 | } 221 | .fox-front-leg:nth-child(2) { 222 | -webkit-animation: upper-right-leg 17s forwards; 223 | animation: upper-right-leg 17s forwards; 224 | } 225 | .fox-front-leg:nth-child(2):before { 226 | -webkit-animation: lower-right-leg 17s forwards; 227 | animation: lower-right-leg 17s forwards; 228 | } 229 | .fox-front-leg + .fox-front-leg { 230 | left: 6.3vmax; 231 | z-index: 1; 232 | } 233 | 234 | .fox-tail { 235 | z-index: -1; 236 | width: 2.8vmax; 237 | height: 2.8vmax; 238 | -webkit-transform-origin: center bottom; 239 | transform-origin: center bottom; 240 | } 241 | .fox-tail:before { 242 | -webkit-transform-origin: center bottom; 243 | transform-origin: center bottom; 244 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2066%2E4%2066%2E4%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23e37c67%22%20d%3D%22M33%2E2%2C0C14%2E9%2C0%2C0%2C14%2E9%2C0%2C33%2E2C0%2C42%2E7%2C0%2E9%2C61%2C2%2E6%2C66%2E4h30%2E6h30%2E6c1%2E7%2D5%2E3%2C2%2E6%2D23%2E7%2C2%2E6%2D33%2E2%20%20%20C66%2E4%2C14%2E9%2C51%2E5%2C0%2C33%2E2%2C0z%22%2F%3E%3C%2Fsvg%3E"); 245 | } 246 | .fox > .fox-tail { 247 | -webkit-transform: rotate(90deg); 248 | transform: rotate(90deg); 249 | top: 19.6vmax; 250 | left: 11.2vmax; 251 | } 252 | .fox-tail > .fox-tail { 253 | -webkit-animation: tail-inner 3s ease-in-out both infinite; 254 | animation: tail-inner 3s ease-in-out both infinite; 255 | top: -1.4vmax; 256 | -webkit-transform: scale(1.1) rotate(-35deg); 257 | transform: scale(1.1) rotate(-35deg); 258 | } 259 | .fox-tail > .fox-tail > .fox-tail > .fox-tail > .fox-tail { 260 | -webkit-animation: tail-outer 3s ease-in-out both infinite; 261 | animation: tail-outer 3s ease-in-out both infinite; 262 | -webkit-transform: scale(1.1) rotate(15deg); 263 | transform: scale(1.1) rotate(15deg); 264 | } 265 | 266 | @-webkit-keyframes tail-inner { 267 | 0% { 268 | -webkit-transform: scale(1.1) rotate(-38deg); 269 | transform: scale(1.1) rotate(-38deg); 270 | } 271 | 50% { 272 | -webkit-transform: scale(1.1) rotate(-35deg); 273 | transform: scale(1.1) rotate(-35deg); 274 | } 275 | 100% { 276 | -webkit-transform: scale(1.1) rotate(-38deg); 277 | transform: scale(1.1) rotate(-38deg); 278 | } 279 | } 280 | 281 | @keyframes tail-inner { 282 | 0% { 283 | -webkit-transform: scale(1.1) rotate(-38deg); 284 | transform: scale(1.1) rotate(-38deg); 285 | } 286 | 50% { 287 | -webkit-transform: scale(1.1) rotate(-35deg); 288 | transform: scale(1.1) rotate(-35deg); 289 | } 290 | 100% { 291 | -webkit-transform: scale(1.1) rotate(-38deg); 292 | transform: scale(1.1) rotate(-38deg); 293 | } 294 | } 295 | @-webkit-keyframes tail-outer { 296 | 0% { 297 | -webkit-transform: scale(1.1) rotate(-3deg); 298 | transform: scale(1.1) rotate(-3deg); 299 | } 300 | 50% { 301 | -webkit-transform: scale(1.1) rotate(15deg); 302 | transform: scale(1.1) rotate(15deg); 303 | } 304 | 100% { 305 | -webkit-transform: scale(1.1) rotate(-3deg); 306 | transform: scale(1.1) rotate(-3deg); 307 | } 308 | } 309 | @keyframes tail-outer { 310 | 0% { 311 | -webkit-transform: scale(1.1) rotate(-3deg); 312 | transform: scale(1.1) rotate(-3deg); 313 | } 314 | 50% { 315 | -webkit-transform: scale(1.1) rotate(15deg); 316 | transform: scale(1.1) rotate(15deg); 317 | } 318 | 100% { 319 | -webkit-transform: scale(1.1) rotate(-3deg); 320 | transform: scale(1.1) rotate(-3deg); 321 | } 322 | } 323 | @-webkit-keyframes fox { 324 | 0% { 325 | -webkit-transform: scale(0.55); 326 | transform: scale(0.55); opacity: 0; 327 | } 328 | 5.88235% { 329 | -webkit-transform: scale(0.6); 330 | transform: scale(0.6); opacity: 1; 331 | } 332 | 11.76471% { 333 | -webkit-transform: scale(0.7); 334 | transform: scale(0.7); 335 | } 336 | 17.64706% { 337 | -webkit-transform: scale(0.825); 338 | transform: scale(0.825); 339 | } 340 | 23.52941% { 341 | -webkit-transform: scale(0.95); 342 | transform: scale(0.95); 343 | } 344 | 27.64706% { 345 | -webkit-transform: scale(1); 346 | transform: scale(1); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; 347 | } 348 | } 349 | @keyframes fox { 350 | 0% { 351 | -webkit-transform: scale(0.55); 352 | transform: scale(0.55); opacity: 0; 353 | } 354 | 5.88235% { 355 | -webkit-transform: scale(0.6); 356 | transform: scale(0.6); opacity: 1; 357 | } 358 | 11.76471% { 359 | -webkit-transform: scale(0.7); 360 | transform: scale(0.7); 361 | } 362 | 17.64706% { 363 | -webkit-transform: scale(0.825); 364 | transform: scale(0.825); 365 | } 366 | 23.52941% { 367 | -webkit-transform: scale(0.95); 368 | transform: scale(0.95); 369 | } 370 | 27.64706% { 371 | -webkit-transform: scale(1); 372 | transform: scale(1); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; 373 | } 374 | } 375 | @-webkit-keyframes body { 376 | 5.88235% { 377 | -webkit-transform: translateY(0.35vmax); 378 | transform: translateY(0.35vmax); 379 | } 380 | 11.76471% { 381 | -webkit-transform: translateY(0.35vmax); 382 | transform: translateY(0.35vmax); 383 | } 384 | 17.64706% { 385 | -webkit-transform: translateY(0.35vmax); 386 | transform: translateY(0.35vmax); 387 | } 388 | 23.52941% { 389 | -webkit-transform: translateY(0.35vmax); 390 | transform: translateY(0.35vmax); 391 | } 392 | 7.05882% { 393 | -webkit-transform: translateY(0); 394 | transform: translateY(0); 395 | } 396 | 12.94118% { 397 | -webkit-transform: translateY(0); 398 | transform: translateY(0); 399 | } 400 | 18.82353% { 401 | -webkit-transform: translateY(0); 402 | transform: translateY(0); 403 | } 404 | 24.70588% { 405 | -webkit-transform: translateY(0); 406 | transform: translateY(0); 407 | } 408 | } 409 | @keyframes body { 410 | 5.88235% { 411 | -webkit-transform: translateY(0.35vmax); 412 | transform: translateY(0.35vmax); 413 | } 414 | 11.76471% { 415 | -webkit-transform: translateY(0.35vmax); 416 | transform: translateY(0.35vmax); 417 | } 418 | 17.64706% { 419 | -webkit-transform: translateY(0.35vmax); 420 | transform: translateY(0.35vmax); 421 | } 422 | 23.52941% { 423 | -webkit-transform: translateY(0.35vmax); 424 | transform: translateY(0.35vmax); 425 | } 426 | 7.05882% { 427 | -webkit-transform: translateY(0); 428 | transform: translateY(0); 429 | } 430 | 12.94118% { 431 | -webkit-transform: translateY(0); 432 | transform: translateY(0); 433 | } 434 | 18.82353% { 435 | -webkit-transform: translateY(0); 436 | transform: translateY(0); 437 | } 438 | 24.70588% { 439 | -webkit-transform: translateY(0); 440 | transform: translateY(0); 441 | } 442 | } 443 | @-webkit-keyframes head { 444 | 5.88235% { 445 | -webkit-transform: translateY(0.7vmax); 446 | transform: translateY(0.7vmax); 447 | } 448 | 11.76471% { 449 | -webkit-transform: translateY(0.7vmax); 450 | transform: translateY(0.7vmax); 451 | } 452 | 17.64706% { 453 | -webkit-transform: translateY(0.7vmax); 454 | transform: translateY(0.7vmax); 455 | } 456 | 23.52941% { 457 | -webkit-transform: translateY(0.7vmax); 458 | transform: translateY(0.7vmax); 459 | } 460 | 7.05882% { 461 | -webkit-transform: translateY(0); 462 | transform: translateY(0); 463 | } 464 | 12.94118% { 465 | -webkit-transform: translateY(0); 466 | transform: translateY(0); 467 | } 468 | 18.82353% { 469 | -webkit-transform: translateY(0); 470 | transform: translateY(0); 471 | } 472 | 24.70588% { 473 | -webkit-transform: translateY(0); 474 | transform: translateY(0); 475 | } 476 | } 477 | @keyframes head { 478 | 5.88235% { 479 | -webkit-transform: translateY(0.7vmax); 480 | transform: translateY(0.7vmax); 481 | } 482 | 11.76471% { 483 | -webkit-transform: translateY(0.7vmax); 484 | transform: translateY(0.7vmax); 485 | } 486 | 17.64706% { 487 | -webkit-transform: translateY(0.7vmax); 488 | transform: translateY(0.7vmax); 489 | } 490 | 23.52941% { 491 | -webkit-transform: translateY(0.7vmax); 492 | transform: translateY(0.7vmax); 493 | } 494 | 7.05882% { 495 | -webkit-transform: translateY(0); 496 | transform: translateY(0); 497 | } 498 | 12.94118% { 499 | -webkit-transform: translateY(0); 500 | transform: translateY(0); 501 | } 502 | 18.82353% { 503 | -webkit-transform: translateY(0); 504 | transform: translateY(0); 505 | } 506 | 24.70588% { 507 | -webkit-transform: translateY(0); 508 | transform: translateY(0); 509 | } 510 | } 511 | @-webkit-keyframes upper-left-leg { 512 | 0% { 513 | -webkit-transform: rotate(0); 514 | transform: rotate(0); 515 | } 516 | 5.88235% { 517 | -webkit-transform: rotate(15deg); 518 | transform: rotate(15deg); 519 | } 520 | 11.76471% { 521 | -webkit-transform: rotate(0); 522 | transform: rotate(0); 523 | } 524 | 17.64706% { 525 | -webkit-transform: rotate(15deg); 526 | transform: rotate(15deg); 527 | } 528 | 23.52941% { 529 | -webkit-transform: rotate(0); 530 | transform: rotate(0); 531 | } 532 | 26.47059% { 533 | -webkit-transform: rotate(-5deg); 534 | transform: rotate(-5deg); 535 | } 536 | 100% { 537 | -webkit-transform: rotate(-5deg); 538 | transform: rotate(-5deg); 539 | } 540 | } 541 | @keyframes upper-left-leg { 542 | 0% { 543 | -webkit-transform: rotate(0); 544 | transform: rotate(0); 545 | } 546 | 5.88235% { 547 | -webkit-transform: rotate(15deg); 548 | transform: rotate(15deg); 549 | } 550 | 11.76471% { 551 | -webkit-transform: rotate(0); 552 | transform: rotate(0); 553 | } 554 | 17.64706% { 555 | -webkit-transform: rotate(15deg); 556 | transform: rotate(15deg); 557 | } 558 | 23.52941% { 559 | -webkit-transform: rotate(0); 560 | transform: rotate(0); 561 | } 562 | 26.47059% { 563 | -webkit-transform: rotate(-5deg); 564 | transform: rotate(-5deg); 565 | } 566 | 100% { 567 | -webkit-transform: rotate(-5deg); 568 | transform: rotate(-5deg); 569 | } 570 | } 571 | @-webkit-keyframes lower-left-leg { 572 | 0% { 573 | -webkit-transform: rotate(0); 574 | transform: rotate(0); 575 | } 576 | 5.88235% { 577 | -webkit-transform: rotate(-15deg); 578 | transform: rotate(-15deg); 579 | } 580 | 11.76471% { 581 | -webkit-transform: rotate(0); 582 | transform: rotate(0); 583 | } 584 | 17.64706% { 585 | -webkit-transform: rotate(-15deg); 586 | transform: rotate(-15deg); 587 | } 588 | 23.52941% { 589 | -webkit-transform: rotate(0); 590 | transform: rotate(0); 591 | } 592 | 100% { 593 | -webkit-transform: rotate(0); 594 | transform: rotate(0); 595 | } 596 | } 597 | @keyframes lower-left-leg { 598 | 0% { 599 | -webkit-transform: rotate(0); 600 | transform: rotate(0); 601 | } 602 | 5.88235% { 603 | -webkit-transform: rotate(-15deg); 604 | transform: rotate(-15deg); 605 | } 606 | 11.76471% { 607 | -webkit-transform: rotate(0); 608 | transform: rotate(0); 609 | } 610 | 17.64706% { 611 | -webkit-transform: rotate(-15deg); 612 | transform: rotate(-15deg); 613 | } 614 | 23.52941% { 615 | -webkit-transform: rotate(0); 616 | transform: rotate(0); 617 | } 618 | 100% { 619 | -webkit-transform: rotate(0); 620 | transform: rotate(0); 621 | } 622 | } 623 | @-webkit-keyframes upper-right-leg { 624 | 5.88235% { 625 | -webkit-transform: rotate(0); 626 | transform: rotate(0); 627 | } 628 | 11.76471% { 629 | -webkit-transform: rotate(20deg); 630 | transform: rotate(20deg); 631 | } 632 | 17.64706% { 633 | -webkit-transform: rotate(0); 634 | transform: rotate(0); 635 | } 636 | 23.52941% { 637 | -webkit-transform: rotate(20deg); 638 | transform: rotate(20deg); 639 | } 640 | 29.41176% { 641 | -webkit-transform: rotate(10deg); 642 | transform: rotate(10deg); 643 | } 644 | 100% { 645 | -webkit-transform: rotate(10deg); 646 | transform: rotate(10deg); 647 | } 648 | } 649 | @keyframes upper-right-leg { 650 | 5.88235% { 651 | -webkit-transform: rotate(0); 652 | transform: rotate(0); 653 | } 654 | 11.76471% { 655 | -webkit-transform: rotate(20deg); 656 | transform: rotate(20deg); 657 | } 658 | 17.64706% { 659 | -webkit-transform: rotate(0); 660 | transform: rotate(0); 661 | } 662 | 23.52941% { 663 | -webkit-transform: rotate(20deg); 664 | transform: rotate(20deg); 665 | } 666 | 29.41176% { 667 | -webkit-transform: rotate(10deg); 668 | transform: rotate(10deg); 669 | } 670 | 100% { 671 | -webkit-transform: rotate(10deg); 672 | transform: rotate(10deg); 673 | } 674 | } 675 | @-webkit-keyframes lower-right-leg { 676 | 5.88235% { 677 | -webkit-transform: rotate(0); 678 | transform: rotate(0); 679 | } 680 | 11.76471% { 681 | -webkit-transform: rotate(-20deg); 682 | transform: rotate(-20deg); 683 | } 684 | 17.64706% { 685 | -webkit-transform: rotate(0); 686 | transform: rotate(0); 687 | } 688 | 23.52941% { 689 | -webkit-transform: rotate(-20deg); 690 | transform: rotate(-20deg); 691 | } 692 | 29.41176% { 693 | -webkit-transform: rotate(-10deg); 694 | transform: rotate(-10deg); 695 | } 696 | 100% { 697 | -webkit-transform: rotate(-10deg); 698 | transform: rotate(-10deg); 699 | } 700 | } 701 | @keyframes lower-right-leg { 702 | 5.88235% { 703 | -webkit-transform: rotate(0); 704 | transform: rotate(0); 705 | } 706 | 11.76471% { 707 | -webkit-transform: rotate(-20deg); 708 | transform: rotate(-20deg); 709 | } 710 | 17.64706% { 711 | -webkit-transform: rotate(0); 712 | transform: rotate(0); 713 | } 714 | 23.52941% { 715 | -webkit-transform: rotate(-20deg); 716 | transform: rotate(-20deg); 717 | } 718 | 29.41176% { 719 | -webkit-transform: rotate(-10deg); 720 | transform: rotate(-10deg); 721 | } 722 | 100% { 723 | -webkit-transform: rotate(-10deg); 724 | transform: rotate(-10deg); 725 | } 726 | } 727 | @-webkit-keyframes eyes { 728 | 14.70588% { 729 | -webkit-transform: rotateY(-4deg); 730 | transform: rotateY(-4deg); 731 | } 732 | 17.64706% { 733 | -webkit-transform: rotateY(-4deg); 734 | transform: rotateY(-4deg); 735 | } 736 | 23.52941% { 737 | -webkit-transform: rotateY(-4deg); 738 | transform: rotateY(-4deg); 739 | } 740 | 29.41176% { 741 | -webkit-transform: rotateY(-4deg); 742 | transform: rotateY(-4deg); 743 | } 744 | 41.17647% { 745 | -webkit-transform: rotateY(-4deg); 746 | transform: rotateY(-4deg); 747 | } 748 | 16.17647% { 749 | -webkit-transform: rotateY(-4deg) scaleY(0.2); 750 | transform: rotateY(-4deg) scaleY(0.2); 751 | } 752 | 26.47059% { 753 | -webkit-transform: rotateY(-4deg) rotateX(-3deg) scaleY(0.2); 754 | transform: rotateY(-4deg) rotateX(-3deg) scaleY(0.2); 755 | } 756 | 44.11765% { 757 | -webkit-transform: rotateY(-24deg) rotateZ(-12deg) rotateX(-2deg); 758 | transform: rotateY(-24deg) rotateZ(-12deg) rotateX(-2deg); 759 | } 760 | 52.94118% { 761 | -webkit-transform: rotateY(-24deg) rotateZ(-12deg) rotateX(-2deg); 762 | transform: rotateY(-24deg) rotateZ(-12deg) rotateX(-2deg); 763 | } 764 | 55.88235% { 765 | -webkit-transform: rotateY(10deg) rotateX(1deg); 766 | transform: rotateY(10deg) rotateX(1deg); 767 | } 768 | 60% { 769 | -webkit-transform: rotateY(10deg) rotateX(1deg); 770 | transform: rotateY(10deg) rotateX(1deg); 771 | } 772 | 63.52941% { 773 | -webkit-transform: rotateY(10deg) rotateX(1deg); 774 | transform: rotateY(10deg) rotateX(1deg); 775 | } 776 | 70.58824% { 777 | -webkit-transform: rotateY(10deg) rotateX(1deg); 778 | transform: rotateY(10deg) rotateX(1deg); 779 | } 780 | 61.76471% { 781 | -webkit-transform: rotateY(10deg) rotateX(1deg) scaleY(0.2); 782 | transform: rotateY(10deg) rotateX(1deg) scaleY(0.2); 783 | } 784 | 76.47059% { 785 | -webkit-transform: rotate(0); 786 | transform: rotate(0); 787 | } 788 | 82.35294% { 789 | -webkit-transform: rotate(0); 790 | transform: rotate(0); 791 | } 792 | 79.41176% { 793 | -webkit-transform: rotate(0) scaleY(0.2); 794 | transform: rotate(0) scaleY(0.2); 795 | } 796 | } 797 | @keyframes eyes { 798 | 14.70588% { 799 | -webkit-transform: rotateY(-4deg); 800 | transform: rotateY(-4deg); 801 | } 802 | 17.64706% { 803 | -webkit-transform: rotateY(-4deg); 804 | transform: rotateY(-4deg); 805 | } 806 | 23.52941% { 807 | -webkit-transform: rotateY(-4deg); 808 | transform: rotateY(-4deg); 809 | } 810 | 29.41176% { 811 | -webkit-transform: rotateY(-4deg); 812 | transform: rotateY(-4deg); 813 | } 814 | 41.17647% { 815 | -webkit-transform: rotateY(-4deg); 816 | transform: rotateY(-4deg); 817 | } 818 | 16.17647% { 819 | -webkit-transform: rotateY(-4deg) scaleY(0.2); 820 | transform: rotateY(-4deg) scaleY(0.2); 821 | } 822 | 26.47059% { 823 | -webkit-transform: rotateY(-4deg) rotateX(-3deg) scaleY(0.2); 824 | transform: rotateY(-4deg) rotateX(-3deg) scaleY(0.2); 825 | } 826 | 44.11765% { 827 | -webkit-transform: rotateY(-24deg) rotateZ(-12deg) rotateX(-2deg); 828 | transform: rotateY(-24deg) rotateZ(-12deg) rotateX(-2deg); 829 | } 830 | 52.94118% { 831 | -webkit-transform: rotateY(-24deg) rotateZ(-12deg) rotateX(-2deg); 832 | transform: rotateY(-24deg) rotateZ(-12deg) rotateX(-2deg); 833 | } 834 | 55.88235% { 835 | -webkit-transform: rotateY(10deg) rotateX(1deg); 836 | transform: rotateY(10deg) rotateX(1deg); 837 | } 838 | 60% { 839 | -webkit-transform: rotateY(10deg) rotateX(1deg); 840 | transform: rotateY(10deg) rotateX(1deg); 841 | } 842 | 63.52941% { 843 | -webkit-transform: rotateY(10deg) rotateX(1deg); 844 | transform: rotateY(10deg) rotateX(1deg); 845 | } 846 | 70.58824% { 847 | -webkit-transform: rotateY(10deg) rotateX(1deg); 848 | transform: rotateY(10deg) rotateX(1deg); 849 | } 850 | 61.76471% { 851 | -webkit-transform: rotateY(10deg) rotateX(1deg) scaleY(0.2); 852 | transform: rotateY(10deg) rotateX(1deg) scaleY(0.2); 853 | } 854 | 76.47059% { 855 | -webkit-transform: rotate(0); 856 | transform: rotate(0); 857 | } 858 | 82.35294% { 859 | -webkit-transform: rotate(0); 860 | transform: rotate(0); 861 | } 862 | 79.41176% { 863 | -webkit-transform: rotate(0) scaleY(0.2); 864 | transform: rotate(0) scaleY(0.2); 865 | } 866 | } 867 | @-webkit-keyframes nose { 868 | 14.70588% { 869 | -webkit-transform: rotateY(-4deg); 870 | transform: rotateY(-4deg); 871 | } 872 | 23.52941% { 873 | -webkit-transform: rotateY(-4deg); 874 | transform: rotateY(-4deg); 875 | } 876 | 29.41176% { 877 | -webkit-transform: rotateY(-4deg); 878 | transform: rotateY(-4deg); 879 | } 880 | 41.17647% { 881 | -webkit-transform: rotateY(-4deg); 882 | transform: rotateY(-4deg); 883 | } 884 | 26.47059% { 885 | -webkit-transform: rotateY(-4deg) rotateX(-3deg); 886 | transform: rotateY(-4deg) rotateX(-3deg); 887 | } 888 | 44.11765% { 889 | -webkit-transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); 890 | transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); 891 | } 892 | 52.94118% { 893 | -webkit-transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); 894 | transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); 895 | } 896 | 55.88235% { 897 | -webkit-transform: rotateY(7deg); 898 | transform: rotateY(7deg); 899 | } 900 | 70.58824% { 901 | -webkit-transform: rotateY(7deg); 902 | transform: rotateY(7deg); 903 | } 904 | 76.47059% { 905 | -webkit-transform: rotateY(0); 906 | transform: rotateY(0); 907 | } 908 | } 909 | @keyframes nose { 910 | 14.70588% { 911 | -webkit-transform: rotateY(-4deg); 912 | transform: rotateY(-4deg); 913 | } 914 | 23.52941% { 915 | -webkit-transform: rotateY(-4deg); 916 | transform: rotateY(-4deg); 917 | } 918 | 29.41176% { 919 | -webkit-transform: rotateY(-4deg); 920 | transform: rotateY(-4deg); 921 | } 922 | 41.17647% { 923 | -webkit-transform: rotateY(-4deg); 924 | transform: rotateY(-4deg); 925 | } 926 | 26.47059% { 927 | -webkit-transform: rotateY(-4deg) rotateX(-3deg); 928 | transform: rotateY(-4deg) rotateX(-3deg); 929 | } 930 | 44.11765% { 931 | -webkit-transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); 932 | transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); 933 | } 934 | 52.94118% { 935 | -webkit-transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); 936 | transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); 937 | } 938 | 55.88235% { 939 | -webkit-transform: rotateY(7deg); 940 | transform: rotateY(7deg); 941 | } 942 | 70.58824% { 943 | -webkit-transform: rotateY(7deg); 944 | transform: rotateY(7deg); 945 | } 946 | 76.47059% { 947 | -webkit-transform: rotateY(0); 948 | transform: rotateY(0); 949 | } 950 | } 951 | @-webkit-keyframes ears { 952 | 0% { 953 | -webkit-transform: translateZ(-5.88vmax); 954 | transform: translateZ(-5.88vmax); 955 | } 956 | 41.17647% { 957 | -webkit-transform: translateZ(-5.88vmax); 958 | transform: translateZ(-5.88vmax); 959 | } 960 | 44.11765% { 961 | -webkit-transform: translateZ(-5.88vmax) rotateY(-40deg) rotateZ(-13deg); 962 | transform: translateZ(-5.88vmax) rotateY(-40deg) rotateZ(-13deg); 963 | } 964 | 52.94118% { 965 | -webkit-transform: translateZ(-5.88vmax) rotateY(-40deg) rotateZ(-13deg); 966 | transform: translateZ(-5.88vmax) rotateY(-40deg) rotateZ(-13deg); 967 | } 968 | 55.88235% { 969 | -webkit-transform: translateZ(-5.88vmax) rotateY(-10deg); 970 | transform: translateZ(-5.88vmax) rotateY(-10deg); 971 | } 972 | 70.58824% { 973 | -webkit-transform: translateZ(-5.88vmax) rotateY(-10deg); 974 | transform: translateZ(-5.88vmax) rotateY(-10deg); 975 | } 976 | } 977 | @keyframes ears { 978 | 0% { 979 | -webkit-transform: translateZ(-5.88vmax); 980 | transform: translateZ(-5.88vmax); 981 | } 982 | 41.17647% { 983 | -webkit-transform: translateZ(-5.88vmax); 984 | transform: translateZ(-5.88vmax); 985 | } 986 | 44.11765% { 987 | -webkit-transform: translateZ(-5.88vmax) rotateY(-40deg) rotateZ(-13deg); 988 | transform: translateZ(-5.88vmax) rotateY(-40deg) rotateZ(-13deg); 989 | } 990 | 52.94118% { 991 | -webkit-transform: translateZ(-5.88vmax) rotateY(-40deg) rotateZ(-13deg); 992 | transform: translateZ(-5.88vmax) rotateY(-40deg) rotateZ(-13deg); 993 | } 994 | 55.88235% { 995 | -webkit-transform: translateZ(-5.88vmax) rotateY(-10deg); 996 | transform: translateZ(-5.88vmax) rotateY(-10deg); 997 | } 998 | 70.58824% { 999 | -webkit-transform: translateZ(-5.88vmax) rotateY(-10deg); 1000 | transform: translateZ(-5.88vmax) rotateY(-10deg); 1001 | } 1002 | } 1003 | @-webkit-keyframes ear-left { 1004 | 23.52941% { 1005 | -webkit-transform: rotate(10deg); 1006 | transform: rotate(10deg); 1007 | } 1008 | 32.35294% { 1009 | -webkit-transform: rotate(10deg); 1010 | transform: rotate(10deg); 1011 | } 1012 | 41.17647% { 1013 | -webkit-transform: rotate(10deg); 1014 | transform: rotate(10deg); 1015 | } 1016 | 35.29412% { 1017 | -webkit-transform: rotate(5deg); 1018 | transform: rotate(5deg); 1019 | } 1020 | 44.11765% { 1021 | -webkit-transform: rotateZ(14deg) scaleX(1.2); 1022 | transform: rotateZ(14deg) scaleX(1.2); 1023 | } 1024 | 52.94118% { 1025 | -webkit-transform: rotateZ(14deg) scaleX(1.2); 1026 | transform: rotateZ(14deg) scaleX(1.2); 1027 | } 1028 | 55.88235% { 1029 | -webkit-transform: rotate(10deg); 1030 | transform: rotate(10deg); 1031 | } 1032 | 70.58824% { 1033 | -webkit-transform: rotate(10deg); 1034 | transform: rotate(10deg); 1035 | } 1036 | } 1037 | @keyframes ear-left { 1038 | 23.52941% { 1039 | -webkit-transform: rotate(10deg); 1040 | transform: rotate(10deg); 1041 | } 1042 | 32.35294% { 1043 | -webkit-transform: rotate(10deg); 1044 | transform: rotate(10deg); 1045 | } 1046 | 41.17647% { 1047 | -webkit-transform: rotate(10deg); 1048 | transform: rotate(10deg); 1049 | } 1050 | 35.29412% { 1051 | -webkit-transform: rotate(5deg); 1052 | transform: rotate(5deg); 1053 | } 1054 | 44.11765% { 1055 | -webkit-transform: rotateZ(14deg) scaleX(1.2); 1056 | transform: rotateZ(14deg) scaleX(1.2); 1057 | } 1058 | 52.94118% { 1059 | -webkit-transform: rotateZ(14deg) scaleX(1.2); 1060 | transform: rotateZ(14deg) scaleX(1.2); 1061 | } 1062 | 55.88235% { 1063 | -webkit-transform: rotate(10deg); 1064 | transform: rotate(10deg); 1065 | } 1066 | 70.58824% { 1067 | -webkit-transform: rotate(10deg); 1068 | transform: rotate(10deg); 1069 | } 1070 | } 1071 | @-webkit-keyframes ear-right { 1072 | 23.52941% { 1073 | -webkit-transform: rotate(-10deg); 1074 | transform: rotate(-10deg); 1075 | } 1076 | 32.35294% { 1077 | -webkit-transform: rotate(-10deg); 1078 | transform: rotate(-10deg); 1079 | } 1080 | 41.17647% { 1081 | -webkit-transform: rotate(-10deg); 1082 | transform: rotate(-10deg); 1083 | } 1084 | 35.29412% { 1085 | -webkit-transform: rotate(-5deg); 1086 | transform: rotate(-5deg); 1087 | } 1088 | 44.11765% { 1089 | -webkit-transform: translateX(-1.33vmax) rotateZ(-7deg) scaleX(1.2); 1090 | transform: translateX(-1.33vmax) rotateZ(-7deg) scaleX(1.2); 1091 | } 1092 | 52.94118% { 1093 | -webkit-transform: translateX(-1.33vmax) rotateZ(-7deg) scaleX(1.2); 1094 | transform: translateX(-1.33vmax) rotateZ(-7deg) scaleX(1.2); 1095 | } 1096 | 55.88235% { 1097 | -webkit-transform: rotate(-10deg); 1098 | transform: rotate(-10deg); 1099 | } 1100 | 70.58824% { 1101 | -webkit-transform: rotate(-10deg); 1102 | transform: rotate(-10deg); 1103 | } 1104 | } 1105 | @keyframes ear-right { 1106 | 23.52941% { 1107 | -webkit-transform: rotate(-10deg); 1108 | transform: rotate(-10deg); 1109 | } 1110 | 32.35294% { 1111 | -webkit-transform: rotate(-10deg); 1112 | transform: rotate(-10deg); 1113 | } 1114 | 41.17647% { 1115 | -webkit-transform: rotate(-10deg); 1116 | transform: rotate(-10deg); 1117 | } 1118 | 35.29412% { 1119 | -webkit-transform: rotate(-5deg); 1120 | transform: rotate(-5deg); 1121 | } 1122 | 44.11765% { 1123 | -webkit-transform: translateX(-1.33vmax) rotateZ(-7deg) scaleX(1.2); 1124 | transform: translateX(-1.33vmax) rotateZ(-7deg) scaleX(1.2); 1125 | } 1126 | 52.94118% { 1127 | -webkit-transform: translateX(-1.33vmax) rotateZ(-7deg) scaleX(1.2); 1128 | transform: translateX(-1.33vmax) rotateZ(-7deg) scaleX(1.2); 1129 | } 1130 | 55.88235% { 1131 | -webkit-transform: rotate(-10deg); 1132 | transform: rotate(-10deg); 1133 | } 1134 | 70.58824% { 1135 | -webkit-transform: rotate(-10deg); 1136 | transform: rotate(-10deg); 1137 | } 1138 | } 1139 | @-webkit-keyframes front { 1140 | 14.70588% { 1141 | -webkit-transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9); 1142 | transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9); 1143 | } 1144 | 23.52941% { 1145 | -webkit-transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9); 1146 | transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9); 1147 | } 1148 | 29.41176% { 1149 | -webkit-transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9); 1150 | transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9); 1151 | } 1152 | 41.17647% { 1153 | -webkit-transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9); 1154 | transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9); 1155 | } 1156 | 26.47059% { 1157 | -webkit-transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9) scaleY(0.9); 1158 | transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9) scaleY(0.9); 1159 | } 1160 | 44.11765% { 1161 | -webkit-transform: translateY(0.35vmax); 1162 | transform: translateY(0.35vmax); 1163 | } 1164 | 52.94118% { 1165 | -webkit-transform: translateY(0.35vmax); 1166 | transform: translateY(0.35vmax); 1167 | } 1168 | 55.88235% { 1169 | -webkit-transform: skewX(-10deg); 1170 | transform: skewX(-10deg); 1171 | } 1172 | 70.58824% { 1173 | -webkit-transform: skewX(-10deg); 1174 | transform: skewX(-10deg); 1175 | } 1176 | 76.47059% { 1177 | -webkit-transform: skewX(0); 1178 | transform: skewX(0); 1179 | } 1180 | } 1181 | @keyframes front { 1182 | 14.70588% { 1183 | -webkit-transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9); 1184 | transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9); 1185 | } 1186 | 23.52941% { 1187 | -webkit-transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9); 1188 | transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9); 1189 | } 1190 | 29.41176% { 1191 | -webkit-transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9); 1192 | transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9); 1193 | } 1194 | 41.17647% { 1195 | -webkit-transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9); 1196 | transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9); 1197 | } 1198 | 26.47059% { 1199 | -webkit-transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9) scaleY(0.9); 1200 | transform: translateX(-0.21vmax) skewX(5deg) scaleX(0.9) scaleY(0.9); 1201 | } 1202 | 44.11765% { 1203 | -webkit-transform: translateY(0.35vmax); 1204 | transform: translateY(0.35vmax); 1205 | } 1206 | 52.94118% { 1207 | -webkit-transform: translateY(0.35vmax); 1208 | transform: translateY(0.35vmax); 1209 | } 1210 | 55.88235% { 1211 | -webkit-transform: skewX(-10deg); 1212 | transform: skewX(-10deg); 1213 | } 1214 | 70.58824% { 1215 | -webkit-transform: skewX(-10deg); 1216 | transform: skewX(-10deg); 1217 | } 1218 | 76.47059% { 1219 | -webkit-transform: skewX(0); 1220 | transform: skewX(0); 1221 | } 1222 | } 1223 | @-webkit-keyframes front-before { 1224 | 41.17647% { 1225 | -webkit-transform: rotateY(90deg); 1226 | transform: rotateY(90deg); 1227 | } 1228 | 44.11765% { 1229 | -webkit-transform: scaleY(1.1) rotateY(35deg); 1230 | transform: scaleY(1.1) rotateY(35deg); 1231 | } 1232 | 52.94118% { 1233 | -webkit-transform: scaleY(1.1) rotateY(35deg); 1234 | transform: scaleY(1.1) rotateY(35deg); 1235 | } 1236 | 55.88235% { 1237 | -webkit-transform: rotateY(90deg); 1238 | transform: rotateY(90deg); 1239 | } 1240 | 70.58824% { 1241 | -webkit-transform: rotateY(90deg); 1242 | transform: rotateY(90deg); 1243 | } 1244 | 100% { 1245 | -webkit-transform: rotateY(90deg); 1246 | transform: rotateY(90deg); 1247 | } 1248 | } 1249 | @keyframes front-before { 1250 | 41.17647% { 1251 | -webkit-transform: rotateY(90deg); 1252 | transform: rotateY(90deg); 1253 | } 1254 | 44.11765% { 1255 | -webkit-transform: scaleY(1.1) rotateY(35deg); 1256 | transform: scaleY(1.1) rotateY(35deg); 1257 | } 1258 | 52.94118% { 1259 | -webkit-transform: scaleY(1.1) rotateY(35deg); 1260 | transform: scaleY(1.1) rotateY(35deg); 1261 | } 1262 | 55.88235% { 1263 | -webkit-transform: rotateY(90deg); 1264 | transform: rotateY(90deg); 1265 | } 1266 | 70.58824% { 1267 | -webkit-transform: rotateY(90deg); 1268 | transform: rotateY(90deg); 1269 | } 1270 | 100% { 1271 | -webkit-transform: rotateY(90deg); 1272 | transform: rotateY(90deg); 1273 | } 1274 | } 1275 | @-webkit-keyframes front-after { 1276 | 41.17647% { 1277 | -webkit-transform: skewX(0); 1278 | transform: skewX(0); 1279 | } 1280 | 44.11765% { 1281 | -webkit-transform: skewX(10deg); 1282 | transform: skewX(10deg); 1283 | } 1284 | 52.94118% { 1285 | -webkit-transform: skewX(10deg); 1286 | transform: skewX(10deg); 1287 | } 1288 | 55.88235% { 1289 | -webkit-transform: skewX(0); 1290 | transform: skewX(0); 1291 | } 1292 | } 1293 | @keyframes front-after { 1294 | 41.17647% { 1295 | -webkit-transform: skewX(0); 1296 | transform: skewX(0); 1297 | } 1298 | 44.11765% { 1299 | -webkit-transform: skewX(10deg); 1300 | transform: skewX(10deg); 1301 | } 1302 | 52.94118% { 1303 | -webkit-transform: skewX(10deg); 1304 | transform: skewX(10deg); 1305 | } 1306 | 55.88235% { 1307 | -webkit-transform: skewX(0); 1308 | transform: skewX(0); 1309 | } 1310 | } 1311 | @-webkit-keyframes squigglevision { 1312 | 0% { 1313 | -webkit-filter: url("#squiggly-0"); 1314 | filter: url("#squiggly-0"); 1315 | } 1316 | 25% { 1317 | -webkit-filter: url("#squiggly-1"); 1318 | filter: url("#squiggly-1"); 1319 | } 1320 | 50% { 1321 | -webkit-filter: url("#squiggly-2"); 1322 | filter: url("#squiggly-2"); 1323 | } 1324 | 75% { 1325 | -webkit-filter: url("#squiggly-3"); 1326 | filter: url("#squiggly-3"); 1327 | } 1328 | 100% { 1329 | -webkit-filter: url("#squiggly-4"); 1330 | filter: url("#squiggly-4"); 1331 | } 1332 | } 1333 | @keyframes squigglevision { 1334 | 0% { 1335 | -webkit-filter: url("#squiggly-0"); 1336 | filter: url("#squiggly-0"); 1337 | } 1338 | 25% { 1339 | -webkit-filter: url("#squiggly-1"); 1340 | filter: url("#squiggly-1"); 1341 | } 1342 | 50% { 1343 | -webkit-filter: url("#squiggly-2"); 1344 | filter: url("#squiggly-2"); 1345 | } 1346 | 75% { 1347 | -webkit-filter: url("#squiggly-3"); 1348 | filter: url("#squiggly-3"); 1349 | } 1350 | 100% { 1351 | -webkit-filter: url("#squiggly-4"); 1352 | filter: url("#squiggly-4"); 1353 | } 1354 | } 1355 | -------------------------------------------------------------------------------- /css/fox.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AASA,oBAAqB;EACpB,QAAQ,EAAE,QAAQ;;;AAGnB,IAAK;EACJ,UAAU,EAAE,KAAK;;;AAGlB,kBAAmB;EAClB,SAAS,EAAE,4BAA4B;EACvC,yBAAyB,EAAE,4BAA8B;;;AAG1D,aAAc;EACb,UAAU,EAAE,sDAAsD;EAClE,eAAe,EAAE,KAAK;EACtB,QAAQ,EAAE,QAAQ;EAClB,cAAc,EAAE,IAAI;EACpB,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,KAAK;EACb,QAAQ,EAAE,MAAM;EAChB,IAAI,EAAE,GAAG;EACT,SAAS,EAAE,gBAAgB;;AAE3B,mBAAQ;EACP,OAAO,EAAE,EAAE;EACX,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,mBAAmB,EAAE,aAAa;EAClC,iBAAiB,EAAE,SAAS;EAC5B,eAAe,EAAE,KAAK;ECRpB,gBAAgB,EAAE,ukBAAuE;;;ADwB7F,IAAK;EACJ,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,SAAe;EACvB,KAAK,EAAE,QAAe;EACtB,SAAS,EAAE,0CAAkB;EAC7B,yBAAyB,EAAE,4BAA8B;EACzD,MAAM,EAAE,OAAO;EACf,IAAI,EAAE,GAAG;EACT,gBAAgB,EAAE,YAAY;;AAE9B,mCAAqB;EACpB,yBAAyB,EAAE,+CAA+C;;AAG3E,MAAE;EACD,QAAQ,EAAE,QAAQ;EAClB,eAAe,EAAE,OAAO;EACxB,iBAAiB,EAAE,SAAS;EAC5B,eAAe,EAAE,WAAW;;AAE5B,2BAAkB;EACjB,OAAO,EAAE,EAAE;EACX,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,KAAK;EACd,eAAe,EAAE,OAAO;EACxB,iBAAiB,EAAE,SAAS;EAC5B,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;;;AAKd,SAAU;EACT,SAAS,EAAE,iBAAiB;EAC5B,SAAS,EAAE,iBAAuB;EAClC,MAAM,EAAE,SAAe;EACvB,KAAK,EAAE,SAAe;EACtB,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;;;AAGR,SAAU;EACT,WAAW,EAAE,MAAgB;;AAE7B,wBAAO;EACN,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,eAAe,EAAE,OAAO;;;AAI1B,SAAU;EACT,SAAS,EAAE,qBAAkC;EAC7C,SAAS,EAAE,sBAA4B;;;AAGxC,QAAS;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;;;AAGZ,oBAAqB;EACpB,SAAS,EAAE,0BAAgC;ECtFxC,gBAAgB,EAAE,qWAAuE;;;ADgG7F,mBAAoB;EACnB,SAAS,EAAE,2BAAiC;ECjGzC,gBAAgB,EAAE,qWAAuE;;;AD2G7F,UAAW;EC3GP,gBAAgB,EAAE,+zBAAuE;EDwH5F,eAAe,EAAE,OAAO;;;AAGzB,UAAW;EACV,SAAS,EAAE,uBAA6B;EACxC,gBAAgB,EAAE,aAAa;;AAE/B,gBAAQ;EACP,SAAS,EAAE,6BAAmC;EAC9C,gBAAgB,EAAE,YAAY;ECjI5B,gBAAgB,EAAE,+ZAAuE;;AD0I5F,iBAAS;EACR,SAAS,EAAE,8BAAoC;EAC/C,gBAAgB,EAAE,SAAS;EAC3B,MAAM,EAAE,QAAc;EACtB,KAAK,EAAE,OAAe;EACtB,MAAM,EAAE,QAAa;EACrB,IAAI,EAAE,SAAe;EACrB,SAAS,EAAE,cAAc;ECjJvB,gBAAgB,EAAE,6XAAuE;;;AD4J7F,SAAU;EACT,SAAS,EAAE,sBAA4B;;AAEvC,gBAAS;EACR,SAAS,EAAE,+BAAsC;EChK/C,gBAAgB,EAAE,ypBAAuE;;;ADoL7F,SAAU;EACT,SAAS,EAAE,sBAA4B;EACvC,gBAAgB,EAAE,cAAqB;;AAEvC,gBAAS;EACR,SAAS,EAAE,8BAAsC;ECzL/C,gBAAgB,EAAE,oSAAuE;;;AD2M7F,SAAU;EACT,WAAW,EAAE,MAAgB;EAC7B,SAAS,EAAE,iBAAuB;EAClC,MAAM,EAAE,SAAe;EACvB,KAAK,EAAE,QAAe;EACtB,GAAG,EAAE,OAAe;EACpB,IAAI,EAAE,QAAc;EACpB,gBAAgB,EAAE,UAAU;;;AAG7B,UAAW;EACV,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;;AAEX,iBAAS;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EC3NT,gBAAgB,EAAE,m9CAAuE;;;AD6O7F,cAAe;EACd,GAAG,EAAE,OAAe;EACpB,IAAI,EAAE,QAAc;EACpB,MAAM,EAAE,OAAe;EACvB,KAAK,EAAE,QAAc;EACrB,gBAAgB,EAAE,UAAU;EClPzB,gBAAgB,EAAE,gaAAuE;;ADoP5F,2CAAkB;EACjB,gBAAgB,EAAE,WAAkB;EACpC,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;;AASZ,qBAAS;EChQN,gBAAgB,EAAE,4cAAuE;;ADwQ5F,0BAAc;EACb,SAAS,EAAE,2BAAiC;;AAE5C,iCAAS;EACR,SAAS,EAAE,2BAAiC;;AAI9C,2BAAe;EACd,SAAS,EAAE,4BAAkC;;AAE7C,kCAAS;EACR,SAAS,EAAE,4BAAkC;;AAI/C,+BAAiB;EAChB,IAAI,EAAE,OAAc;EACpB,OAAO,EAAE,CAAC;;;AAIZ,SAAU;EACT,OAAO,EAAE,EAAE;EAEX,KAAK,EADgB,OAAc;EAEnC,MAAM,EAFe,OAAc;EAGnC,gBAAgB,EAAE,aAAa;;AAE/B,gBAAS;EACR,gBAAgB,EAAE,aAAa;ECtS7B,gBAAgB,EAAE,6ZAAuE;;AD+S5F,gBAAS;EACR,SAAS,EAAE,aAAa;EACxB,GAAG,EAAE,QAAe;EACpB,IAAI,EAAE,QAAe;;AAGtB,qBAAY;EACX,SAAS,EAAE,uCAAuC;EAClD,GAAG,EAAE,QAAwB;EAC7B,SAAS,EACR,yBACc;;AAGhB,yDAAgD;EAE/C,SAAS,EAAE,uCAAuC;EAClD,SAAS,EACR,wBACa;;;AAIhB,qBAIC;EAHA,EAAG;IAAE,SAAS,EAAE,yBAAyB;;EACzC,GAAI;IAAE,SAAS,EAAE,yBAAyB;;EAC1C,IAAK;IAAE,SAAS,EAAE,yBAAyB;;;AAG5C,qBAIC;EAHA,EAAG;IAAE,SAAS,EAAE,wBAAwB;;EACxC,GAAI;IAAE,SAAS,EAAE,wBAAwB;;EACzC,IAAK;IAAE,SAAS,EAAE,wBAAwB;;;AA2G1C,cAYC;EATE,EAAmC;IAIjC,SAAS,EAAE,uBAAa;;EAJ1B,QAAmC;IAIjC,SAAS,EAAE,sBAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,UAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,YAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,WAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,gDAAa;;;AAP7B,eAYC;EATE,QAAmC;IAIjC,SAAS,EAAE,oBAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,oBAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,oBAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,oBAAa;;EAJ1B,QAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;;AAP7B,eAYC;EATE,QAAmC;IAIjC,SAAS,EAAE,mBAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,mBAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,mBAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,mBAAa;;EAJ1B,QAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;;AAP7B,yBAYC;EATE,EAAmC;IAIjC,SAAS,EAAE,SAAa;;EAJ1B,QAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,SAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,SAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,IAAmC;IAIjC,SAAS,EAAE,aAAa;;;AAP7B,yBAYC;EATE,EAAmC;IAIjC,SAAS,EAAE,SAAa;;EAJ1B,QAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,SAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,SAAa;;EAJ1B,IAAmC;IAIjC,SAAS,EAAE,SAAa;;;AAP7B,0BAYC;EATE,QAAmC;IAIjC,SAAS,EAAE,SAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,SAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,IAAmC;IAIjC,SAAS,EAAE,aAAa;;;AAP7B,0BAYC;EATE,QAAmC;IAIjC,SAAS,EAAE,SAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,SAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,IAAmC;IAIjC,SAAS,EAAE,cAAa;;;AAP7B,eAYC;EATE,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,0BAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,yCAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,8CAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,8CAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,4BAAa;;EAJ1B,GAAmC;IAIjC,SAAS,EAAE,4BAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,4BAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,4BAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,wCAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,SAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,SAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,qBAAa;;;AAP7B,eAYC;EATE,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,6BAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,8CAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,8CAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,UAAa;;;AAP7B,eAYC;EATE,EAAmC;IAIjC,SAAS,EAAE,qBAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,qBAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,qDAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,qDAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,qCAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,qCAAa;;;AAP7B,mBAYC;EATE,SAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,YAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,0BAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,0BAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;;AAP7B,oBAYC;EATE,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,gDAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,gDAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,cAAa;;;AAP7B,gBAYC;EATE,SAAmC;IAIjC,SAAS,EAAE,6CAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,6CAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,6CAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,6CAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,yDAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,oBAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,oBAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,aAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,QAAa;;;AAP7B,uBAYC;EATE,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,0BAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,0BAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,cAAa;;EAJ1B,IAAmC;IAIjC,SAAS,EAAE,cAAa;;;AAP7B,sBAYC;EATE,SAAmC;IAIjC,SAAS,EAAE,QAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,YAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,YAAa;;EAJ1B,SAAmC;IAIjC,SAAS,EAAE,QAAa;;;AAQ9B,yBAqBC;EApBA,EAAG;IACF,cAAc,EAAE,kBAAkB;IAClC,MAAM,EAAE,kBAAkB;;EAE3B,GAAI;IACH,cAAc,EAAE,kBAAkB;IAClC,MAAM,EAAE,kBAAkB;;EAE3B,GAAI;IACH,cAAc,EAAE,kBAAkB;IAClC,MAAM,EAAE,kBAAkB;;EAE3B,GAAI;IACH,cAAc,EAAE,kBAAkB;IAClC,MAAM,EAAE,kBAAkB;;EAE3B,IAAK;IACJ,cAAc,EAAE,kBAAkB;IAClC,MAAM,EAAE,kBAAkB", 4 | "sources": ["../scss/fox.scss","../node_modules/sass-svg/scss/main.scss"], 5 | "names": [], 6 | "file": "fox.css" 7 | } -------------------------------------------------------------------------------- /css/husky.css: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes husky-head { 2 | 0% { 3 | -webkit-transform: rotate(0); 4 | transform: rotate(0); 5 | } 6 | 6.66667% { 7 | -webkit-transform: rotate(0); 8 | transform: rotate(0); 9 | } 10 | 20% { 11 | -webkit-transform: rotate(-14deg); 12 | transform: rotate(-14deg); 13 | } 14 | 40% { 15 | -webkit-transform: rotate(-7deg); 16 | transform: rotate(-7deg); 17 | } 18 | 46.66667% { 19 | -webkit-transform: rotate(-14deg); 20 | transform: rotate(-14deg); 21 | } 22 | 60% { 23 | -webkit-transform: rotate(-7deg); 24 | transform: rotate(-7deg); 25 | } 26 | 73.33333% { 27 | -webkit-transform: rotate(0); 28 | transform: rotate(0); 29 | } 30 | 80% { 31 | -webkit-transform: rotate(0); 32 | transform: rotate(0); 33 | } 34 | } 35 | @keyframes husky-head { 36 | 0% { 37 | -webkit-transform: rotate(0); 38 | transform: rotate(0); 39 | } 40 | 6.66667% { 41 | -webkit-transform: rotate(0); 42 | transform: rotate(0); 43 | } 44 | 20% { 45 | -webkit-transform: rotate(-14deg); 46 | transform: rotate(-14deg); 47 | } 48 | 40% { 49 | -webkit-transform: rotate(-7deg); 50 | transform: rotate(-7deg); 51 | } 52 | 46.66667% { 53 | -webkit-transform: rotate(-14deg); 54 | transform: rotate(-14deg); 55 | } 56 | 60% { 57 | -webkit-transform: rotate(-7deg); 58 | transform: rotate(-7deg); 59 | } 60 | 73.33333% { 61 | -webkit-transform: rotate(0); 62 | transform: rotate(0); 63 | } 64 | 80% { 65 | -webkit-transform: rotate(0); 66 | transform: rotate(0); 67 | } 68 | } 69 | @-webkit-keyframes husky-mouth { 70 | 0% { 71 | -webkit-transform: translateX(0); 72 | transform: translateX(0); 73 | } 74 | 6.66667% { 75 | -webkit-transform: translateX(0); 76 | transform: translateX(0); 77 | } 78 | 13.33333% { 79 | -webkit-transform: translateX(35%); 80 | transform: translateX(35%); 81 | } 82 | 20% { 83 | -webkit-transform: translateX(35%); 84 | transform: translateX(35%); 85 | } 86 | 26.66667% { 87 | -webkit-transform: translateX(35%); 88 | transform: translateX(35%); 89 | } 90 | 33.33333% { 91 | -webkit-transform: translateX(0) translateY(-5%); 92 | transform: translateX(0) translateY(-5%); 93 | } 94 | } 95 | @keyframes husky-mouth { 96 | 0% { 97 | -webkit-transform: translateX(0); 98 | transform: translateX(0); 99 | } 100 | 6.66667% { 101 | -webkit-transform: translateX(0); 102 | transform: translateX(0); 103 | } 104 | 13.33333% { 105 | -webkit-transform: translateX(35%); 106 | transform: translateX(35%); 107 | } 108 | 20% { 109 | -webkit-transform: translateX(35%); 110 | transform: translateX(35%); 111 | } 112 | 26.66667% { 113 | -webkit-transform: translateX(35%); 114 | transform: translateX(35%); 115 | } 116 | 33.33333% { 117 | -webkit-transform: translateX(0) translateY(-5%); 118 | transform: translateX(0) translateY(-5%); 119 | } 120 | } 121 | @-webkit-keyframes husky-nose { 122 | 0% { 123 | -webkit-transform: translate(0); 124 | transform: translate(0); 125 | } 126 | 6.66667% { 127 | -webkit-transform: translate(0); 128 | transform: translate(0); 129 | } 130 | 13.33333% { 131 | -webkit-transform: translateX(100%); 132 | transform: translateX(100%); 133 | } 134 | 26.66667% { 135 | -webkit-transform: translateX(100%); 136 | transform: translateX(100%); 137 | } 138 | 33.33333% { 139 | -webkit-transform: translateX(0) translateY(-15%); 140 | transform: translateX(0) translateY(-15%); 141 | } 142 | } 143 | @keyframes husky-nose { 144 | 0% { 145 | -webkit-transform: translate(0); 146 | transform: translate(0); 147 | } 148 | 6.66667% { 149 | -webkit-transform: translate(0); 150 | transform: translate(0); 151 | } 152 | 13.33333% { 153 | -webkit-transform: translateX(100%); 154 | transform: translateX(100%); 155 | } 156 | 26.66667% { 157 | -webkit-transform: translateX(100%); 158 | transform: translateX(100%); 159 | } 160 | 33.33333% { 161 | -webkit-transform: translateX(0) translateY(-15%); 162 | transform: translateX(0) translateY(-15%); 163 | } 164 | } 165 | @-webkit-keyframes husky-body { 166 | 0% { 167 | -webkit-transform: translate(0); 168 | transform: translate(0); 169 | } 170 | 6.66667% { 171 | -webkit-transform: translateY(3%); 172 | transform: translateY(3%); 173 | } 174 | 13.33333% { 175 | -webkit-transform: translate(0); 176 | transform: translate(0); 177 | } 178 | 20% { 179 | -webkit-transform: translate(0); 180 | transform: translate(0); 181 | } 182 | 26.66667% { 183 | -webkit-transform: translateY(2%); 184 | transform: translateY(2%); 185 | } 186 | 33.33333% { 187 | -webkit-transform: translateY(0); 188 | transform: translateY(0); 189 | } 190 | } 191 | @keyframes husky-body { 192 | 0% { 193 | -webkit-transform: translate(0); 194 | transform: translate(0); 195 | } 196 | 6.66667% { 197 | -webkit-transform: translateY(3%); 198 | transform: translateY(3%); 199 | } 200 | 13.33333% { 201 | -webkit-transform: translate(0); 202 | transform: translate(0); 203 | } 204 | 20% { 205 | -webkit-transform: translate(0); 206 | transform: translate(0); 207 | } 208 | 26.66667% { 209 | -webkit-transform: translateY(2%); 210 | transform: translateY(2%); 211 | } 212 | 33.33333% { 213 | -webkit-transform: translateY(0); 214 | transform: translateY(0); 215 | } 216 | } 217 | @-webkit-keyframes husky-mane { 218 | 0% { 219 | -webkit-transform: translate(0); 220 | transform: translate(0); 221 | } 222 | 6.66667% { 223 | -webkit-transform: translateY(5%); 224 | transform: translateY(5%); 225 | } 226 | 13.33333% { 227 | -webkit-transform: translate(0); 228 | transform: translate(0); 229 | } 230 | 20% { 231 | -webkit-transform: translate(0); 232 | transform: translate(0); 233 | } 234 | 26.66667% { 235 | -webkit-transform: translateY(3%); 236 | transform: translateY(3%); 237 | } 238 | 33.33333% { 239 | -webkit-transform: translateY(0); 240 | transform: translateY(0); 241 | } 242 | } 243 | @keyframes husky-mane { 244 | 0% { 245 | -webkit-transform: translate(0); 246 | transform: translate(0); 247 | } 248 | 6.66667% { 249 | -webkit-transform: translateY(5%); 250 | transform: translateY(5%); 251 | } 252 | 13.33333% { 253 | -webkit-transform: translate(0); 254 | transform: translate(0); 255 | } 256 | 20% { 257 | -webkit-transform: translate(0); 258 | transform: translate(0); 259 | } 260 | 26.66667% { 261 | -webkit-transform: translateY(3%); 262 | transform: translateY(3%); 263 | } 264 | 33.33333% { 265 | -webkit-transform: translateY(0); 266 | transform: translateY(0); 267 | } 268 | } 269 | @-webkit-keyframes husky-face { 270 | 0% { 271 | -webkit-transform: translate(0); 272 | transform: translate(0); 273 | } 274 | 6.66667% { 275 | -webkit-transform: translate(0); 276 | transform: translate(0); 277 | } 278 | 13.33333% { 279 | -webkit-transform: translateX(15%); 280 | transform: translateX(15%); 281 | } 282 | 20% { 283 | -webkit-transform: translateX(15%) translateY(0); 284 | transform: translateX(15%) translateY(0); 285 | } 286 | 26.66667% { 287 | -webkit-transform: translateX(15%) translateY(0); 288 | transform: translateX(15%) translateY(0); 289 | } 290 | 33.33333% { 291 | -webkit-transform: translateX(0) translateY(-15%); 292 | transform: translateX(0) translateY(-15%); 293 | } 294 | 40% { 295 | -webkit-transform: translateX(0) translateY(-15%); 296 | transform: translateX(0) translateY(-15%); 297 | } 298 | 46.66667% { 299 | -webkit-transform: translateX(0) translateY(0); 300 | transform: translateX(0) translateY(0); 301 | } 302 | } 303 | @keyframes husky-face { 304 | 0% { 305 | -webkit-transform: translate(0); 306 | transform: translate(0); 307 | } 308 | 6.66667% { 309 | -webkit-transform: translate(0); 310 | transform: translate(0); 311 | } 312 | 13.33333% { 313 | -webkit-transform: translateX(15%); 314 | transform: translateX(15%); 315 | } 316 | 20% { 317 | -webkit-transform: translateX(15%) translateY(0); 318 | transform: translateX(15%) translateY(0); 319 | } 320 | 26.66667% { 321 | -webkit-transform: translateX(15%) translateY(0); 322 | transform: translateX(15%) translateY(0); 323 | } 324 | 33.33333% { 325 | -webkit-transform: translateX(0) translateY(-15%); 326 | transform: translateX(0) translateY(-15%); 327 | } 328 | 40% { 329 | -webkit-transform: translateX(0) translateY(-15%); 330 | transform: translateX(0) translateY(-15%); 331 | } 332 | 46.66667% { 333 | -webkit-transform: translateX(0) translateY(0); 334 | transform: translateX(0) translateY(0); 335 | } 336 | } 337 | @-webkit-keyframes husky-left-eye { 338 | 2.66667% { 339 | -webkit-transform: scaleY(1); 340 | transform: scaleY(1); 341 | } 342 | 3.33333% { 343 | -webkit-transform: scaleY(0.3); 344 | transform: scaleY(0.3); 345 | } 346 | 4% { 347 | -webkit-transform: scaleY(1); 348 | transform: scaleY(1); 349 | } 350 | 6.66667% { 351 | -webkit-transform: translateX(0); 352 | transform: translateX(0); 353 | } 354 | 9.33333% { 355 | -webkit-transform: scaleY(1) translateX(75%); 356 | transform: scaleY(1) translateX(75%); 357 | } 358 | 10% { 359 | -webkit-transform: scaleY(0.3) translateX(75%); 360 | transform: scaleY(0.3) translateX(75%); 361 | } 362 | 10.66667% { 363 | -webkit-transform: scaleY(1) translateX(75%); 364 | transform: scaleY(1) translateX(75%); 365 | } 366 | 13.33333% { 367 | -webkit-transform: translateX(150%); 368 | transform: translateX(150%); 369 | } 370 | 22% { 371 | -webkit-transform: scaleY(1) translateX(150%); 372 | transform: scaleY(1) translateX(150%); 373 | } 374 | 22.66667% { 375 | -webkit-transform: scaleY(0.3) translateX(150%); 376 | transform: scaleY(0.3) translateX(150%); 377 | } 378 | 23.33333% { 379 | -webkit-transform: scaleY(1) translateX(150%); 380 | transform: scaleY(1) translateX(150%); 381 | } 382 | 25.33333% { 383 | -webkit-transform: scaleY(1) translateX(150%); 384 | transform: scaleY(1) translateX(150%); 385 | } 386 | 26% { 387 | -webkit-transform: scaleY(0.3) translateX(150%); 388 | transform: scaleY(0.3) translateX(150%); 389 | } 390 | 26.66667% { 391 | -webkit-transform: scaleY(1) translateX(150%); 392 | transform: scaleY(1) translateX(150%); 393 | } 394 | 33.33333% { 395 | -webkit-transform: translateX(0) translateY(-170%); 396 | transform: translateX(0) translateY(-170%); 397 | } 398 | 36.0% { 399 | -webkit-transform: scaleY(1) translateY(-170%); 400 | transform: scaleY(1) translateY(-170%); 401 | } 402 | 36.66667% { 403 | -webkit-transform: scaleY(0.3) translateY(-170%); 404 | transform: scaleY(0.3) translateY(-170%); 405 | } 406 | 37.33333% { 407 | -webkit-transform: scaleY(1) translateY(-170%); 408 | transform: scaleY(1) translateY(-170%); 409 | } 410 | 38% { 411 | -webkit-transform: scaleY(1) translateY(-170%); 412 | transform: scaleY(1) translateY(-170%); 413 | } 414 | 38.66667% { 415 | -webkit-transform: scaleY(0.3) translateY(-170%); 416 | transform: scaleY(0.3) translateY(-170%); 417 | } 418 | 39.33333% { 419 | -webkit-transform: scaleY(1) translateY(-170%); 420 | transform: scaleY(1) translateY(-170%); 421 | } 422 | 53.33333% { 423 | -webkit-transform: translateY(0); 424 | transform: translateY(0); 425 | } 426 | 65.33333% { 427 | -webkit-transform: scaleY(1) translateY(0); 428 | transform: scaleY(1) translateY(0); 429 | } 430 | 66% { 431 | -webkit-transform: scaleY(0.3) translateY(0); 432 | transform: scaleY(0.3) translateY(0); 433 | } 434 | 66.66667% { 435 | -webkit-transform: scaleY(1) translateY(0); 436 | transform: scaleY(1) translateY(0); 437 | } 438 | 70% { 439 | -webkit-transform: scaleY(1) translateY(0); 440 | transform: scaleY(1) translateY(0); 441 | } 442 | 70.66667% { 443 | -webkit-transform: scaleY(0.3) translateY(0); 444 | transform: scaleY(0.3) translateY(0); 445 | } 446 | 71.33333% { 447 | -webkit-transform: scaleY(1) translateY(0); 448 | transform: scaleY(1) translateY(0); 449 | } 450 | } 451 | @keyframes husky-left-eye { 452 | 2.66667% { 453 | -webkit-transform: scaleY(1); 454 | transform: scaleY(1); 455 | } 456 | 3.33333% { 457 | -webkit-transform: scaleY(0.3); 458 | transform: scaleY(0.3); 459 | } 460 | 4% { 461 | -webkit-transform: scaleY(1); 462 | transform: scaleY(1); 463 | } 464 | 6.66667% { 465 | -webkit-transform: translateX(0); 466 | transform: translateX(0); 467 | } 468 | 9.33333% { 469 | -webkit-transform: scaleY(1) translateX(75%); 470 | transform: scaleY(1) translateX(75%); 471 | } 472 | 10% { 473 | -webkit-transform: scaleY(0.3) translateX(75%); 474 | transform: scaleY(0.3) translateX(75%); 475 | } 476 | 10.66667% { 477 | -webkit-transform: scaleY(1) translateX(75%); 478 | transform: scaleY(1) translateX(75%); 479 | } 480 | 13.33333% { 481 | -webkit-transform: translateX(150%); 482 | transform: translateX(150%); 483 | } 484 | 22% { 485 | -webkit-transform: scaleY(1) translateX(150%); 486 | transform: scaleY(1) translateX(150%); 487 | } 488 | 22.66667% { 489 | -webkit-transform: scaleY(0.3) translateX(150%); 490 | transform: scaleY(0.3) translateX(150%); 491 | } 492 | 23.33333% { 493 | -webkit-transform: scaleY(1) translateX(150%); 494 | transform: scaleY(1) translateX(150%); 495 | } 496 | 25.33333% { 497 | -webkit-transform: scaleY(1) translateX(150%); 498 | transform: scaleY(1) translateX(150%); 499 | } 500 | 26% { 501 | -webkit-transform: scaleY(0.3) translateX(150%); 502 | transform: scaleY(0.3) translateX(150%); 503 | } 504 | 26.66667% { 505 | -webkit-transform: scaleY(1) translateX(150%); 506 | transform: scaleY(1) translateX(150%); 507 | } 508 | 33.33333% { 509 | -webkit-transform: translateX(0) translateY(-170%); 510 | transform: translateX(0) translateY(-170%); 511 | } 512 | 36.0% { 513 | -webkit-transform: scaleY(1) translateY(-170%); 514 | transform: scaleY(1) translateY(-170%); 515 | } 516 | 36.66667% { 517 | -webkit-transform: scaleY(0.3) translateY(-170%); 518 | transform: scaleY(0.3) translateY(-170%); 519 | } 520 | 37.33333% { 521 | -webkit-transform: scaleY(1) translateY(-170%); 522 | transform: scaleY(1) translateY(-170%); 523 | } 524 | 38% { 525 | -webkit-transform: scaleY(1) translateY(-170%); 526 | transform: scaleY(1) translateY(-170%); 527 | } 528 | 38.66667% { 529 | -webkit-transform: scaleY(0.3) translateY(-170%); 530 | transform: scaleY(0.3) translateY(-170%); 531 | } 532 | 39.33333% { 533 | -webkit-transform: scaleY(1) translateY(-170%); 534 | transform: scaleY(1) translateY(-170%); 535 | } 536 | 53.33333% { 537 | -webkit-transform: translateY(0); 538 | transform: translateY(0); 539 | } 540 | 65.33333% { 541 | -webkit-transform: scaleY(1) translateY(0); 542 | transform: scaleY(1) translateY(0); 543 | } 544 | 66% { 545 | -webkit-transform: scaleY(0.3) translateY(0); 546 | transform: scaleY(0.3) translateY(0); 547 | } 548 | 66.66667% { 549 | -webkit-transform: scaleY(1) translateY(0); 550 | transform: scaleY(1) translateY(0); 551 | } 552 | 70% { 553 | -webkit-transform: scaleY(1) translateY(0); 554 | transform: scaleY(1) translateY(0); 555 | } 556 | 70.66667% { 557 | -webkit-transform: scaleY(0.3) translateY(0); 558 | transform: scaleY(0.3) translateY(0); 559 | } 560 | 71.33333% { 561 | -webkit-transform: scaleY(1) translateY(0); 562 | transform: scaleY(1) translateY(0); 563 | } 564 | } 565 | @-webkit-keyframes husky-right-eye { 566 | 2.66667% { 567 | -webkit-transform: scaleY(1); 568 | transform: scaleY(1); 569 | } 570 | 3.33333% { 571 | -webkit-transform: scaleY(0.3); 572 | transform: scaleY(0.3); 573 | } 574 | 4% { 575 | -webkit-transform: scaleY(1); 576 | transform: scaleY(1); 577 | } 578 | 6.66667% { 579 | -webkit-transform: translateX(0); 580 | transform: translateX(0); 581 | } 582 | 9.33333% { 583 | -webkit-transform: scaleY(1) translateX(75%); 584 | transform: scaleY(1) translateX(75%); 585 | } 586 | 10% { 587 | -webkit-transform: scaleY(0.3) translateX(75%); 588 | transform: scaleY(0.3) translateX(75%); 589 | } 590 | 10.66667% { 591 | -webkit-transform: scaleY(1) translateX(75%); 592 | transform: scaleY(1) translateX(75%); 593 | } 594 | 13.33333% { 595 | -webkit-transform: translateX(150%); 596 | transform: translateX(150%); 597 | } 598 | 22% { 599 | -webkit-transform: scaleY(1) translateX(150%); 600 | transform: scaleY(1) translateX(150%); 601 | } 602 | 22.66667% { 603 | -webkit-transform: scaleY(0.3) translateX(150%); 604 | transform: scaleY(0.3) translateX(150%); 605 | } 606 | 23.33333% { 607 | -webkit-transform: scaleY(1) translateX(150%); 608 | transform: scaleY(1) translateX(150%); 609 | } 610 | 25.33333% { 611 | -webkit-transform: scaleY(1) translateX(150%); 612 | transform: scaleY(1) translateX(150%); 613 | } 614 | 26% { 615 | -webkit-transform: scaleY(0.3) translateX(150%); 616 | transform: scaleY(0.3) translateX(150%); 617 | } 618 | 26.66667% { 619 | -webkit-transform: scaleY(1) translateX(150%); 620 | transform: scaleY(1) translateX(150%); 621 | } 622 | 33.33333% { 623 | -webkit-transform: translateX(0) translateY(-170%); 624 | transform: translateX(0) translateY(-170%); 625 | } 626 | 36.0% { 627 | -webkit-transform: scaleY(1) translateY(-170%); 628 | transform: scaleY(1) translateY(-170%); 629 | } 630 | 36.66667% { 631 | -webkit-transform: scaleY(0.3) translateY(-170%); 632 | transform: scaleY(0.3) translateY(-170%); 633 | } 634 | 37.33333% { 635 | -webkit-transform: scaleY(1) translateY(-170%); 636 | transform: scaleY(1) translateY(-170%); 637 | } 638 | 38% { 639 | -webkit-transform: scaleY(1) translateY(-170%); 640 | transform: scaleY(1) translateY(-170%); 641 | } 642 | 38.66667% { 643 | -webkit-transform: scaleY(0.3) translateY(-170%); 644 | transform: scaleY(0.3) translateY(-170%); 645 | } 646 | 39.33333% { 647 | -webkit-transform: scaleY(1) translateY(-170%); 648 | transform: scaleY(1) translateY(-170%); 649 | } 650 | 53.33333% { 651 | -webkit-transform: translateY(0); 652 | transform: translateY(0); 653 | } 654 | 65.33333% { 655 | -webkit-transform: scaleY(1) translateY(0); 656 | transform: scaleY(1) translateY(0); 657 | } 658 | 66% { 659 | -webkit-transform: scaleY(0.3) translateY(0); 660 | transform: scaleY(0.3) translateY(0); 661 | } 662 | 66.66667% { 663 | -webkit-transform: scaleY(1) translateY(0); 664 | transform: scaleY(1) translateY(0); 665 | } 666 | 70% { 667 | -webkit-transform: scaleY(1) translateY(0); 668 | transform: scaleY(1) translateY(0); 669 | } 670 | 70.66667% { 671 | -webkit-transform: scaleY(0.3) translateY(0); 672 | transform: scaleY(0.3) translateY(0); 673 | } 674 | 71.33333% { 675 | -webkit-transform: scaleY(1) translateY(0); 676 | transform: scaleY(1) translateY(0); 677 | } 678 | } 679 | @keyframes husky-right-eye { 680 | 2.66667% { 681 | -webkit-transform: scaleY(1); 682 | transform: scaleY(1); 683 | } 684 | 3.33333% { 685 | -webkit-transform: scaleY(0.3); 686 | transform: scaleY(0.3); 687 | } 688 | 4% { 689 | -webkit-transform: scaleY(1); 690 | transform: scaleY(1); 691 | } 692 | 6.66667% { 693 | -webkit-transform: translateX(0); 694 | transform: translateX(0); 695 | } 696 | 9.33333% { 697 | -webkit-transform: scaleY(1) translateX(75%); 698 | transform: scaleY(1) translateX(75%); 699 | } 700 | 10% { 701 | -webkit-transform: scaleY(0.3) translateX(75%); 702 | transform: scaleY(0.3) translateX(75%); 703 | } 704 | 10.66667% { 705 | -webkit-transform: scaleY(1) translateX(75%); 706 | transform: scaleY(1) translateX(75%); 707 | } 708 | 13.33333% { 709 | -webkit-transform: translateX(150%); 710 | transform: translateX(150%); 711 | } 712 | 22% { 713 | -webkit-transform: scaleY(1) translateX(150%); 714 | transform: scaleY(1) translateX(150%); 715 | } 716 | 22.66667% { 717 | -webkit-transform: scaleY(0.3) translateX(150%); 718 | transform: scaleY(0.3) translateX(150%); 719 | } 720 | 23.33333% { 721 | -webkit-transform: scaleY(1) translateX(150%); 722 | transform: scaleY(1) translateX(150%); 723 | } 724 | 25.33333% { 725 | -webkit-transform: scaleY(1) translateX(150%); 726 | transform: scaleY(1) translateX(150%); 727 | } 728 | 26% { 729 | -webkit-transform: scaleY(0.3) translateX(150%); 730 | transform: scaleY(0.3) translateX(150%); 731 | } 732 | 26.66667% { 733 | -webkit-transform: scaleY(1) translateX(150%); 734 | transform: scaleY(1) translateX(150%); 735 | } 736 | 33.33333% { 737 | -webkit-transform: translateX(0) translateY(-170%); 738 | transform: translateX(0) translateY(-170%); 739 | } 740 | 36.0% { 741 | -webkit-transform: scaleY(1) translateY(-170%); 742 | transform: scaleY(1) translateY(-170%); 743 | } 744 | 36.66667% { 745 | -webkit-transform: scaleY(0.3) translateY(-170%); 746 | transform: scaleY(0.3) translateY(-170%); 747 | } 748 | 37.33333% { 749 | -webkit-transform: scaleY(1) translateY(-170%); 750 | transform: scaleY(1) translateY(-170%); 751 | } 752 | 38% { 753 | -webkit-transform: scaleY(1) translateY(-170%); 754 | transform: scaleY(1) translateY(-170%); 755 | } 756 | 38.66667% { 757 | -webkit-transform: scaleY(0.3) translateY(-170%); 758 | transform: scaleY(0.3) translateY(-170%); 759 | } 760 | 39.33333% { 761 | -webkit-transform: scaleY(1) translateY(-170%); 762 | transform: scaleY(1) translateY(-170%); 763 | } 764 | 53.33333% { 765 | -webkit-transform: translateY(0); 766 | transform: translateY(0); 767 | } 768 | 65.33333% { 769 | -webkit-transform: scaleY(1) translateY(0); 770 | transform: scaleY(1) translateY(0); 771 | } 772 | 66% { 773 | -webkit-transform: scaleY(0.3) translateY(0); 774 | transform: scaleY(0.3) translateY(0); 775 | } 776 | 66.66667% { 777 | -webkit-transform: scaleY(1) translateY(0); 778 | transform: scaleY(1) translateY(0); 779 | } 780 | 70% { 781 | -webkit-transform: scaleY(1) translateY(0); 782 | transform: scaleY(1) translateY(0); 783 | } 784 | 70.66667% { 785 | -webkit-transform: scaleY(0.3) translateY(0); 786 | transform: scaleY(0.3) translateY(0); 787 | } 788 | 71.33333% { 789 | -webkit-transform: scaleY(1) translateY(0); 790 | transform: scaleY(1) translateY(0); 791 | } 792 | } 793 | @-webkit-keyframes husky-tongue { 794 | 46.66667% { 795 | -webkit-transform: translateY(0); 796 | transform: translateY(0); 797 | } 798 | 53.33333% { 799 | -webkit-transform: translateY(100%) rotate(10deg); 800 | transform: translateY(100%) rotate(10deg); 801 | } 802 | 73.33333% { 803 | -webkit-transform: translateY(100%) rotate(10deg); 804 | transform: translateY(100%) rotate(10deg); 805 | } 806 | 80% { 807 | -webkit-transform: translateY(0); 808 | transform: translateY(0); 809 | } 810 | } 811 | @keyframes husky-tongue { 812 | 46.66667% { 813 | -webkit-transform: translateY(0); 814 | transform: translateY(0); 815 | } 816 | 53.33333% { 817 | -webkit-transform: translateY(100%) rotate(10deg); 818 | transform: translateY(100%) rotate(10deg); 819 | } 820 | 73.33333% { 821 | -webkit-transform: translateY(100%) rotate(10deg); 822 | transform: translateY(100%) rotate(10deg); 823 | } 824 | 80% { 825 | -webkit-transform: translateY(0); 826 | transform: translateY(0); 827 | } 828 | } 829 | @-webkit-keyframes husky-mouth-cover-left { 830 | 40% { 831 | -webkit-transform: rotate(0); 832 | transform: rotate(0); 833 | } 834 | 60% { 835 | -webkit-transform: rotate(90deg); 836 | transform: rotate(90deg); 837 | } 838 | 73.33333% { 839 | -webkit-transform: rotate(90deg); 840 | transform: rotate(90deg); 841 | } 842 | 86.66667% { 843 | -webkit-transform: rotate(0); 844 | transform: rotate(0); 845 | } 846 | } 847 | @keyframes husky-mouth-cover-left { 848 | 40% { 849 | -webkit-transform: rotate(0); 850 | transform: rotate(0); 851 | } 852 | 60% { 853 | -webkit-transform: rotate(90deg); 854 | transform: rotate(90deg); 855 | } 856 | 73.33333% { 857 | -webkit-transform: rotate(90deg); 858 | transform: rotate(90deg); 859 | } 860 | 86.66667% { 861 | -webkit-transform: rotate(0); 862 | transform: rotate(0); 863 | } 864 | } 865 | @-webkit-keyframes husky-mouth-cover-right { 866 | 40% { 867 | -webkit-transform: rotate(0); 868 | transform: rotate(0); 869 | } 870 | 60% { 871 | -webkit-transform: rotate(-90deg); 872 | transform: rotate(-90deg); 873 | } 874 | 73.33333% { 875 | -webkit-transform: rotate(-90deg); 876 | transform: rotate(-90deg); 877 | } 878 | 86.66667% { 879 | -webkit-transform: rotate(0); 880 | transform: rotate(0); 881 | } 882 | } 883 | @keyframes husky-mouth-cover-right { 884 | 40% { 885 | -webkit-transform: rotate(0); 886 | transform: rotate(0); 887 | } 888 | 60% { 889 | -webkit-transform: rotate(-90deg); 890 | transform: rotate(-90deg); 891 | } 892 | 73.33333% { 893 | -webkit-transform: rotate(-90deg); 894 | transform: rotate(-90deg); 895 | } 896 | 86.66667% { 897 | -webkit-transform: rotate(0); 898 | transform: rotate(0); 899 | } 900 | } 901 | @-webkit-keyframes husky-tail { 902 | 6.66667% { 903 | -webkit-transform: rotate(0); 904 | transform: rotate(0); 905 | } 906 | 10% { 907 | -webkit-transform: rotate(30deg); 908 | transform: rotate(30deg); 909 | } 910 | 13.33333% { 911 | -webkit-transform: rotate(0); 912 | transform: rotate(0); 913 | } 914 | 20% { 915 | -webkit-transform: rotate(0); 916 | transform: rotate(0); 917 | } 918 | 26.66667% { 919 | -webkit-transform: rotate(30deg); 920 | transform: rotate(30deg); 921 | } 922 | 46.66667% { 923 | -webkit-transform: rotate(30deg); 924 | transform: rotate(30deg); 925 | } 926 | 48.33333% { 927 | -webkit-transform: rotate(0); 928 | transform: rotate(0); 929 | } 930 | 50% { 931 | -webkit-transform: rotate(28deg); 932 | transform: rotate(28deg); 933 | } 934 | 50.83333% { 935 | -webkit-transform: rotate(0); 936 | transform: rotate(0); 937 | } 938 | 51.66667% { 939 | -webkit-transform: rotate(28deg); 940 | transform: rotate(28deg); 941 | } 942 | 52.5% { 943 | -webkit-transform: rotate(0); 944 | transform: rotate(0); 945 | } 946 | 53.33333% { 947 | -webkit-transform: rotate(28deg); 948 | transform: rotate(28deg); 949 | } 950 | 54.16667% { 951 | -webkit-transform: rotate(0); 952 | transform: rotate(0); 953 | } 954 | 55.0% { 955 | -webkit-transform: rotate(28deg); 956 | transform: rotate(28deg); 957 | } 958 | 55.83333% { 959 | -webkit-transform: rotate(0); 960 | transform: rotate(0); 961 | } 962 | 56.66667% { 963 | -webkit-transform: rotate(28deg); 964 | transform: rotate(28deg); 965 | } 966 | 57.5% { 967 | -webkit-transform: rotate(0); 968 | transform: rotate(0); 969 | } 970 | 58.33333% { 971 | -webkit-transform: rotate(28deg); 972 | transform: rotate(28deg); 973 | } 974 | 59.16667% { 975 | -webkit-transform: rotate(0); 976 | transform: rotate(0); 977 | } 978 | 60% { 979 | -webkit-transform: rotate(28deg); 980 | transform: rotate(28deg); 981 | } 982 | 60.83333% { 983 | -webkit-transform: rotate(0); 984 | transform: rotate(0); 985 | } 986 | 61.66667% { 987 | -webkit-transform: rotate(28deg); 988 | transform: rotate(28deg); 989 | } 990 | 62.5% { 991 | -webkit-transform: rotate(0); 992 | transform: rotate(0); 993 | } 994 | 63.33333% { 995 | -webkit-transform: rotate(28deg); 996 | transform: rotate(28deg); 997 | } 998 | 64.16667% { 999 | -webkit-transform: rotate(0); 1000 | transform: rotate(0); 1001 | } 1002 | 65% { 1003 | -webkit-transform: rotate(28deg); 1004 | transform: rotate(28deg); 1005 | } 1006 | 65.83333% { 1007 | -webkit-transform: rotate(0); 1008 | transform: rotate(0); 1009 | } 1010 | 66.66667% { 1011 | -webkit-transform: rotate(28deg); 1012 | transform: rotate(28deg); 1013 | } 1014 | 67.5% { 1015 | -webkit-transform: rotate(0); 1016 | transform: rotate(0); 1017 | } 1018 | 68.33333% { 1019 | -webkit-transform: rotate(28deg); 1020 | transform: rotate(28deg); 1021 | } 1022 | 69.16667% { 1023 | -webkit-transform: rotate(0); 1024 | transform: rotate(0); 1025 | } 1026 | 70% { 1027 | -webkit-transform: rotate(28deg); 1028 | transform: rotate(28deg); 1029 | } 1030 | 70.83333% { 1031 | -webkit-transform: rotate(0); 1032 | transform: rotate(0); 1033 | } 1034 | 71.66667% { 1035 | -webkit-transform: rotate(28deg); 1036 | transform: rotate(28deg); 1037 | } 1038 | 72.5% { 1039 | -webkit-transform: rotate(0); 1040 | transform: rotate(0); 1041 | } 1042 | } 1043 | @keyframes husky-tail { 1044 | 6.66667% { 1045 | -webkit-transform: rotate(0); 1046 | transform: rotate(0); 1047 | } 1048 | 10% { 1049 | -webkit-transform: rotate(30deg); 1050 | transform: rotate(30deg); 1051 | } 1052 | 13.33333% { 1053 | -webkit-transform: rotate(0); 1054 | transform: rotate(0); 1055 | } 1056 | 20% { 1057 | -webkit-transform: rotate(0); 1058 | transform: rotate(0); 1059 | } 1060 | 26.66667% { 1061 | -webkit-transform: rotate(30deg); 1062 | transform: rotate(30deg); 1063 | } 1064 | 46.66667% { 1065 | -webkit-transform: rotate(30deg); 1066 | transform: rotate(30deg); 1067 | } 1068 | 48.33333% { 1069 | -webkit-transform: rotate(0); 1070 | transform: rotate(0); 1071 | } 1072 | 50% { 1073 | -webkit-transform: rotate(28deg); 1074 | transform: rotate(28deg); 1075 | } 1076 | 50.83333% { 1077 | -webkit-transform: rotate(0); 1078 | transform: rotate(0); 1079 | } 1080 | 51.66667% { 1081 | -webkit-transform: rotate(28deg); 1082 | transform: rotate(28deg); 1083 | } 1084 | 52.5% { 1085 | -webkit-transform: rotate(0); 1086 | transform: rotate(0); 1087 | } 1088 | 53.33333% { 1089 | -webkit-transform: rotate(28deg); 1090 | transform: rotate(28deg); 1091 | } 1092 | 54.16667% { 1093 | -webkit-transform: rotate(0); 1094 | transform: rotate(0); 1095 | } 1096 | 55.0% { 1097 | -webkit-transform: rotate(28deg); 1098 | transform: rotate(28deg); 1099 | } 1100 | 55.83333% { 1101 | -webkit-transform: rotate(0); 1102 | transform: rotate(0); 1103 | } 1104 | 56.66667% { 1105 | -webkit-transform: rotate(28deg); 1106 | transform: rotate(28deg); 1107 | } 1108 | 57.5% { 1109 | -webkit-transform: rotate(0); 1110 | transform: rotate(0); 1111 | } 1112 | 58.33333% { 1113 | -webkit-transform: rotate(28deg); 1114 | transform: rotate(28deg); 1115 | } 1116 | 59.16667% { 1117 | -webkit-transform: rotate(0); 1118 | transform: rotate(0); 1119 | } 1120 | 60% { 1121 | -webkit-transform: rotate(28deg); 1122 | transform: rotate(28deg); 1123 | } 1124 | 60.83333% { 1125 | -webkit-transform: rotate(0); 1126 | transform: rotate(0); 1127 | } 1128 | 61.66667% { 1129 | -webkit-transform: rotate(28deg); 1130 | transform: rotate(28deg); 1131 | } 1132 | 62.5% { 1133 | -webkit-transform: rotate(0); 1134 | transform: rotate(0); 1135 | } 1136 | 63.33333% { 1137 | -webkit-transform: rotate(28deg); 1138 | transform: rotate(28deg); 1139 | } 1140 | 64.16667% { 1141 | -webkit-transform: rotate(0); 1142 | transform: rotate(0); 1143 | } 1144 | 65% { 1145 | -webkit-transform: rotate(28deg); 1146 | transform: rotate(28deg); 1147 | } 1148 | 65.83333% { 1149 | -webkit-transform: rotate(0); 1150 | transform: rotate(0); 1151 | } 1152 | 66.66667% { 1153 | -webkit-transform: rotate(28deg); 1154 | transform: rotate(28deg); 1155 | } 1156 | 67.5% { 1157 | -webkit-transform: rotate(0); 1158 | transform: rotate(0); 1159 | } 1160 | 68.33333% { 1161 | -webkit-transform: rotate(28deg); 1162 | transform: rotate(28deg); 1163 | } 1164 | 69.16667% { 1165 | -webkit-transform: rotate(0); 1166 | transform: rotate(0); 1167 | } 1168 | 70% { 1169 | -webkit-transform: rotate(28deg); 1170 | transform: rotate(28deg); 1171 | } 1172 | 70.83333% { 1173 | -webkit-transform: rotate(0); 1174 | transform: rotate(0); 1175 | } 1176 | 71.66667% { 1177 | -webkit-transform: rotate(28deg); 1178 | transform: rotate(28deg); 1179 | } 1180 | 72.5% { 1181 | -webkit-transform: rotate(0); 1182 | transform: rotate(0); 1183 | } 1184 | } 1185 | @-webkit-keyframes husky-left-ear { 1186 | 0% { 1187 | -webkit-transform: rotate(6deg); 1188 | transform: rotate(6deg); 1189 | } 1190 | 6.66667% { 1191 | -webkit-transform: rotate(6deg); 1192 | transform: rotate(6deg); 1193 | } 1194 | 13.33333% { 1195 | -webkit-transform: rotate(15deg); 1196 | transform: rotate(15deg); 1197 | } 1198 | 26.66667% { 1199 | -webkit-transform: rotate(15deg); 1200 | transform: rotate(15deg); 1201 | } 1202 | 33.33333% { 1203 | -webkit-transform: rotate(30deg); 1204 | transform: rotate(30deg); 1205 | } 1206 | 40% { 1207 | -webkit-transform: rotate(30deg); 1208 | transform: rotate(30deg); 1209 | } 1210 | 46.66667% { 1211 | -webkit-transform: rotate(0deg); 1212 | transform: rotate(0deg); 1213 | } 1214 | 53.33333% { 1215 | -webkit-transform: rotate(0deg); 1216 | transform: rotate(0deg); 1217 | } 1218 | 60% { 1219 | -webkit-transform: rotate(15deg); 1220 | transform: rotate(15deg); 1221 | } 1222 | 80% { 1223 | -webkit-transform: rotate(15deg); 1224 | transform: rotate(15deg); 1225 | } 1226 | 93.33333% { 1227 | -webkit-transform: rotate(6deg); 1228 | transform: rotate(6deg); 1229 | } 1230 | 100% { 1231 | -webkit-transform: rotateZ(6deg); 1232 | transform: rotateZ(6deg); 1233 | } 1234 | } 1235 | @keyframes husky-left-ear { 1236 | 0% { 1237 | -webkit-transform: rotate(6deg); 1238 | transform: rotate(6deg); 1239 | } 1240 | 6.66667% { 1241 | -webkit-transform: rotate(6deg); 1242 | transform: rotate(6deg); 1243 | } 1244 | 13.33333% { 1245 | -webkit-transform: rotate(15deg); 1246 | transform: rotate(15deg); 1247 | } 1248 | 26.66667% { 1249 | -webkit-transform: rotate(15deg); 1250 | transform: rotate(15deg); 1251 | } 1252 | 33.33333% { 1253 | -webkit-transform: rotate(30deg); 1254 | transform: rotate(30deg); 1255 | } 1256 | 40% { 1257 | -webkit-transform: rotate(30deg); 1258 | transform: rotate(30deg); 1259 | } 1260 | 46.66667% { 1261 | -webkit-transform: rotate(0deg); 1262 | transform: rotate(0deg); 1263 | } 1264 | 53.33333% { 1265 | -webkit-transform: rotate(0deg); 1266 | transform: rotate(0deg); 1267 | } 1268 | 60% { 1269 | -webkit-transform: rotate(15deg); 1270 | transform: rotate(15deg); 1271 | } 1272 | 80% { 1273 | -webkit-transform: rotate(15deg); 1274 | transform: rotate(15deg); 1275 | } 1276 | 93.33333% { 1277 | -webkit-transform: rotate(6deg); 1278 | transform: rotate(6deg); 1279 | } 1280 | 100% { 1281 | -webkit-transform: rotateZ(6deg); 1282 | transform: rotateZ(6deg); 1283 | } 1284 | } 1285 | @-webkit-keyframes husky-right-ear { 1286 | 0% { 1287 | -webkit-transform: rotateZ(-16deg) rotateY(180deg); 1288 | transform: rotateZ(-16deg) rotateY(180deg); 1289 | } 1290 | 6.66667% { 1291 | -webkit-transform: rotateZ(-16deg) rotateY(180deg); 1292 | transform: rotateZ(-16deg) rotateY(180deg); 1293 | } 1294 | 13.33333% { 1295 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1296 | transform: rotateZ(-19deg) rotateY(180deg); 1297 | } 1298 | 26.66667% { 1299 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1300 | transform: rotateZ(-19deg) rotateY(180deg); 1301 | } 1302 | 33.33333% { 1303 | -webkit-transform: rotateZ(-30deg) rotateY(180deg); 1304 | transform: rotateZ(-30deg) rotateY(180deg); 1305 | } 1306 | 36.66667% { 1307 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1308 | transform: rotateZ(-19deg) rotateY(180deg); 1309 | } 1310 | 37.33333% { 1311 | -webkit-transform: rotateZ(-30deg) rotateY(180deg); 1312 | transform: rotateZ(-30deg) rotateY(180deg); 1313 | } 1314 | 38% { 1315 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1316 | transform: rotateZ(-19deg) rotateY(180deg); 1317 | } 1318 | 40% { 1319 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1320 | transform: rotateZ(-19deg) rotateY(180deg); 1321 | } 1322 | 40.66667% { 1323 | -webkit-transform: rotateZ(-30deg) rotateY(180deg); 1324 | transform: rotateZ(-30deg) rotateY(180deg); 1325 | } 1326 | 41.33333% { 1327 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1328 | transform: rotateZ(-19deg) rotateY(180deg); 1329 | } 1330 | 46.66667% { 1331 | -webkit-transform: rotateZ(-9deg) rotateY(180deg); 1332 | transform: rotateZ(-9deg) rotateY(180deg); 1333 | } 1334 | 53.33333% { 1335 | -webkit-transform: rotateZ(-9deg) rotateY(180deg); 1336 | transform: rotateZ(-9deg) rotateY(180deg); 1337 | } 1338 | 60% { 1339 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1340 | transform: rotateZ(-19deg) rotateY(180deg); 1341 | } 1342 | 60.66667% { 1343 | -webkit-transform: rotateZ(-30deg) rotateY(180deg); 1344 | transform: rotateZ(-30deg) rotateY(180deg); 1345 | } 1346 | 61.33333% { 1347 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1348 | transform: rotateZ(-19deg) rotateY(180deg); 1349 | } 1350 | 62.66667% { 1351 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1352 | transform: rotateZ(-19deg) rotateY(180deg); 1353 | } 1354 | 63.33333% { 1355 | -webkit-transform: rotateZ(-30deg) rotateY(180deg); 1356 | transform: rotateZ(-30deg) rotateY(180deg); 1357 | } 1358 | 64% { 1359 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1360 | transform: rotateZ(-19deg) rotateY(180deg); 1361 | } 1362 | 80% { 1363 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1364 | transform: rotateZ(-19deg) rotateY(180deg); 1365 | } 1366 | 93.33333% { 1367 | -webkit-transform: rotateZ(-16deg) rotateY(180deg); 1368 | transform: rotateZ(-16deg) rotateY(180deg); 1369 | } 1370 | 100% { 1371 | -webkit-transform: rotateZ(-16deg) rotateY(180deg); 1372 | transform: rotateZ(-16deg) rotateY(180deg); 1373 | } 1374 | } 1375 | @keyframes husky-right-ear { 1376 | 0% { 1377 | -webkit-transform: rotateZ(-16deg) rotateY(180deg); 1378 | transform: rotateZ(-16deg) rotateY(180deg); 1379 | } 1380 | 6.66667% { 1381 | -webkit-transform: rotateZ(-16deg) rotateY(180deg); 1382 | transform: rotateZ(-16deg) rotateY(180deg); 1383 | } 1384 | 13.33333% { 1385 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1386 | transform: rotateZ(-19deg) rotateY(180deg); 1387 | } 1388 | 26.66667% { 1389 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1390 | transform: rotateZ(-19deg) rotateY(180deg); 1391 | } 1392 | 33.33333% { 1393 | -webkit-transform: rotateZ(-30deg) rotateY(180deg); 1394 | transform: rotateZ(-30deg) rotateY(180deg); 1395 | } 1396 | 36.66667% { 1397 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1398 | transform: rotateZ(-19deg) rotateY(180deg); 1399 | } 1400 | 37.33333% { 1401 | -webkit-transform: rotateZ(-30deg) rotateY(180deg); 1402 | transform: rotateZ(-30deg) rotateY(180deg); 1403 | } 1404 | 38% { 1405 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1406 | transform: rotateZ(-19deg) rotateY(180deg); 1407 | } 1408 | 40% { 1409 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1410 | transform: rotateZ(-19deg) rotateY(180deg); 1411 | } 1412 | 40.66667% { 1413 | -webkit-transform: rotateZ(-30deg) rotateY(180deg); 1414 | transform: rotateZ(-30deg) rotateY(180deg); 1415 | } 1416 | 41.33333% { 1417 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1418 | transform: rotateZ(-19deg) rotateY(180deg); 1419 | } 1420 | 46.66667% { 1421 | -webkit-transform: rotateZ(-9deg) rotateY(180deg); 1422 | transform: rotateZ(-9deg) rotateY(180deg); 1423 | } 1424 | 53.33333% { 1425 | -webkit-transform: rotateZ(-9deg) rotateY(180deg); 1426 | transform: rotateZ(-9deg) rotateY(180deg); 1427 | } 1428 | 60% { 1429 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1430 | transform: rotateZ(-19deg) rotateY(180deg); 1431 | } 1432 | 60.66667% { 1433 | -webkit-transform: rotateZ(-30deg) rotateY(180deg); 1434 | transform: rotateZ(-30deg) rotateY(180deg); 1435 | } 1436 | 61.33333% { 1437 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1438 | transform: rotateZ(-19deg) rotateY(180deg); 1439 | } 1440 | 62.66667% { 1441 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1442 | transform: rotateZ(-19deg) rotateY(180deg); 1443 | } 1444 | 63.33333% { 1445 | -webkit-transform: rotateZ(-30deg) rotateY(180deg); 1446 | transform: rotateZ(-30deg) rotateY(180deg); 1447 | } 1448 | 64% { 1449 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1450 | transform: rotateZ(-19deg) rotateY(180deg); 1451 | } 1452 | 80% { 1453 | -webkit-transform: rotateZ(-19deg) rotateY(180deg); 1454 | transform: rotateZ(-19deg) rotateY(180deg); 1455 | } 1456 | 93.33333% { 1457 | -webkit-transform: rotateZ(-16deg) rotateY(180deg); 1458 | transform: rotateZ(-16deg) rotateY(180deg); 1459 | } 1460 | 100% { 1461 | -webkit-transform: rotateZ(-16deg) rotateY(180deg); 1462 | transform: rotateZ(-16deg) rotateY(180deg); 1463 | } 1464 | } 1465 | body { 1466 | background-color: #4F8EDB; 1467 | } 1468 | 1469 | .codrops-header h1 { 1470 | -webkit-animation: squigglevision 0.3s infinite; 1471 | animation: squigglevision 0.3s infinite; 1472 | -webkit-animation-timing-function: cubic-bezier(0, 0, 0.8, 0.9); 1473 | animation-timing-function: cubic-bezier(0, 0, 0.8, 0.9); 1474 | } 1475 | 1476 | .codrops-icon--drop:before { 1477 | color: #3B6BA5; 1478 | } 1479 | 1480 | .content--husky { 1481 | display: -webkit-flex; 1482 | display: -ms-flexbox; 1483 | display: flex; 1484 | -webkit-flex-direction: column; 1485 | -ms-flex-direction: column; 1486 | flex-direction: column; 1487 | -webkit-justify-content: flex-end; 1488 | -ms-flex-pack: end; 1489 | justify-content: flex-end; 1490 | -webkit-align-items: center; 1491 | -ms-flex-align: center; 1492 | align-items: center; 1493 | height: 100vh; 1494 | position: absolute; 1495 | pointer-events: none; 1496 | top: 0; 1497 | width: 100%; 1498 | margin: 0; 1499 | padding: 3rem 0; 1500 | -webkit-animation: squigglevision 0.3s infinite; 1501 | animation: squigglevision 0.3s infinite; 1502 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20height%3D%2278%22%20width%3D%22500%22%20viewBox%3D%220%200%20500%2078%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23dbe8f7%22%20d%3D%22M375%2C27c%2D37%2C0%2D82%2E5%2D19%2D125%2D19s%2D88%2C19%2D125%2C19S42%2E5%2C8%2C0%2C8v70h250h250V8C457%2E5%2C8%2C412%2C27%2C375%2C27z%22%2F%3E%3C%2Fsvg%3E"); 1503 | } 1504 | .content--husky *, .content--husky *:before, .content--husky *:after { 1505 | -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important; 1506 | animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important; 1507 | } 1508 | .content--husky *:before, .content--husky *:after { 1509 | content: ''; 1510 | display: block; 1511 | position: absolute; 1512 | } 1513 | .content--husky, .content--husky:before, .content--husky:after { 1514 | background-repeat: no-repeat; 1515 | background-size: 395vmin; 1516 | background-position: -150vmin calc(100% + 11vmin); 1517 | } 1518 | .content--husky:before, .content--husky:after { 1519 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20height%3D%2278%22%20width%3D%22500%22%20viewBox%3D%220%200%20500%2078%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23dbe8f7%22%20d%3D%22M375%2C27c%2D37%2C0%2D82%2E5%2D19%2D125%2D19s%2D88%2C19%2D125%2C19S42%2E5%2C8%2C0%2C8v70h250h250V8C457%2E5%2C8%2C412%2C27%2C375%2C27z%22%2F%3E%3Cpolygon%20fill%3D%22rgba%280%2C%200%2C%200%2C%200%2E5%29%22%20points%3D%22256%2E3%2C0%20254%2E7%2C6%2E5%20256%2E1%2C6%2E5%20256%2E1%2C8%2E4%20256%2E3%2C8%2E4%20256%2E5%2C8%2E4%20256%2E5%2C6%2E5%20258%2C6%2E5%22%2F%3E%3Cpolygon%20fill%3D%22rgba%280%2C%200%2C%200%2C%200%2E5%29%22%20points%3D%22252%2E8%2C0%20251%2E2%2C6%2E5%20252%2E6%2C6%2E5%20252%2E6%2C8%2E4%20252%2E8%2C8%2E4%20253%2C8%2E4%20253%2C6%2E5%20254%2E4%2C6%2E5%22%2F%3E%3Cpolygon%20fill%3D%22rgba%280%2C%200%2C%200%2C%200%2E5%29%22%20points%3D%2221%2E4%2C1%2E3%2019%2E7%2C7%2E8%2021%2E2%2C7%2E8%2021%2E2%2C9%2E7%2021%2E4%2C9%2E7%2021%2E6%2C9%2E7%2021%2E6%2C7%2E8%2023%2C7%2E8%22%2F%3E%3C%2Fsvg%3E"); 1520 | } 1521 | .content--husky:before { 1522 | background-position: left bottom; 1523 | } 1524 | .content--husky:after { 1525 | background-position: -100vmin bottom; 1526 | } 1527 | @media (max-width: 700px) { 1528 | .content--husky:after { 1529 | background-position: -115vmin bottom; 1530 | } 1531 | } 1532 | .content--husky:before, .content--husky:after { 1533 | content: ''; 1534 | display: block; 1535 | position: absolute; 1536 | top: 0; 1537 | left: 0; 1538 | width: 100%; 1539 | height: 100%; 1540 | opacity: 0.5; 1541 | z-index: -1; 1542 | } 1543 | 1544 | .husky { 1545 | -webkit-animation: husky-squiggly-anim 0.3s infinite; 1546 | animation: husky-squiggly-anim 0.3s infinite; 1547 | height: 48vmin; 1548 | width: 67.2vmin; 1549 | } 1550 | @media screen and (max-width: 400px) { 1551 | .husky { 1552 | -webkit-animation: husky-none; 1553 | animation: husky-none; 1554 | } 1555 | } 1556 | .husky:before { 1557 | width: 70%; 1558 | height: 0.4vmin; 1559 | background: #B9C4D3; 1560 | border-radius: 0.4vmin; 1561 | top: 100%; 1562 | left: 5%; 1563 | z-index: 2; 1564 | } 1565 | .husky:after { 1566 | width: 100vw; 1567 | left: 50%; 1568 | height: 3rem; 1569 | top: calc(100% + 0.4vmin); 1570 | z-index: 3; 1571 | background: #dbe8f7; 1572 | -webkit-transform: translateX(-50%); 1573 | transform: translateX(-50%); 1574 | } 1575 | 1576 | .husky-head { 1577 | -webkit-animation: husky-head 12s none infinite; 1578 | animation: husky-head 12s none infinite; 1579 | position: absolute; 1580 | height: 45%; 1581 | width: 58%; 1582 | left: 34%; 1583 | top: 5%; 1584 | -webkit-transform-origin: bottom center; 1585 | transform-origin: bottom center; 1586 | } 1587 | .husky-head:before { 1588 | background: #383B44; 1589 | border-top-left-radius: 50% 40%; 1590 | border-top-right-radius: 50% 40%; 1591 | border-bottom-right-radius: 10% 60%; 1592 | height: 100%; 1593 | width: 100%; 1594 | } 1595 | 1596 | .husky-face { 1597 | -webkit-animation: husky-face 12s none infinite; 1598 | animation: husky-face 12s none infinite; 1599 | position: absolute; 1600 | width: 98%; 1601 | height: 62%; 1602 | top: 15%; 1603 | left: 2%; 1604 | } 1605 | .husky-face:before { 1606 | z-index: 1; 1607 | width: 94%; 1608 | height: 70%; 1609 | left: 3%; 1610 | background-color: white; 1611 | bottom: 5%; 1612 | border-top-left-radius: 40% 50%; 1613 | border-top-right-radius: 40% 50%; 1614 | border-bottom-left-radius: 30% 50%; 1615 | border-bottom-right-radius: 30% 40%; 1616 | } 1617 | 1618 | .husky-eye { 1619 | -webkit-animation: husky-eyes 12s none infinite; 1620 | animation: husky-eyes 12s none infinite; 1621 | position: absolute; 1622 | width: 30%; 1623 | height: 40%; 1624 | background-color: white; 1625 | right: 45%; 1626 | border-top-left-radius: 55% 50%; 1627 | border-top-right-radius: 45% 50%; 1628 | z-index: 2; 1629 | } 1630 | .husky-eye:before { 1631 | -webkit-animation: husky-left-eye 12s none infinite; 1632 | animation: husky-left-eye 12s none infinite; 1633 | height: 15%; 1634 | width: 15%; 1635 | border-radius: 100%; 1636 | background: #5D8BC3; 1637 | top: 45%; 1638 | left: 45%; 1639 | -webkit-transform-origin: center center; 1640 | transform-origin: center center; 1641 | } 1642 | .husky-eye + .husky-eye { 1643 | z-index: 1; 1644 | right: initial; 1645 | left: 48%; 1646 | border-top-right-radius: 55% 50%; 1647 | border-top-left-radius: 45% 50%; 1648 | } 1649 | 1650 | .husky-nose { 1651 | -webkit-animation: husky-nose 12s none infinite; 1652 | animation: husky-nose 12s none infinite; 1653 | z-index: 2; 1654 | position: absolute; 1655 | width: 20%; 1656 | height: 20%; 1657 | top: 29%; 1658 | left: 42%; 1659 | } 1660 | .husky-nose:after { 1661 | background: #383B44; 1662 | height: 100%; 1663 | width: 100%; 1664 | border-top-left-radius: 20% 20%; 1665 | border-top-right-radius: 30% 20%; 1666 | border-bottom-right-radius: 55% 80%; 1667 | border-bottom-left-radius: 50% 80%; 1668 | } 1669 | .husky-nose:before { 1670 | height: 100%; 1671 | width: 200%; 1672 | background: white; 1673 | top: 50%; 1674 | left: -50%; 1675 | z-index: -1; 1676 | border-radius: 50%; 1677 | } 1678 | 1679 | .husky-ear { 1680 | -webkit-animation: husky-left-ear 12s both infinite; 1681 | animation: husky-left-ear 12s both infinite; 1682 | position: absolute; 1683 | top: 3%; 1684 | left: -10%; 1685 | width: 48%; 1686 | height: 30%; 1687 | border-bottom-left-radius: 100% 90%; 1688 | border-top-left-radius: 10%; 1689 | -webkit-transform-origin: 80% center; 1690 | transform-origin: 80% center; 1691 | overflow: hidden; 1692 | background: #383B44; 1693 | } 1694 | .husky-ear:before { 1695 | width: 70%; 1696 | height: 55%; 1697 | border: 2px solid #383B44; 1698 | background: #DE6465; 1699 | top: 20%; 1700 | left: 15%; 1701 | -webkit-transform-origin: top left; 1702 | transform-origin: top left; 1703 | -webkit-transform: skewX(30deg) rotate(-5deg); 1704 | transform: skewX(30deg) rotate(-5deg); 1705 | } 1706 | .husky-ear:after { 1707 | width: 70%; 1708 | height: 100%; 1709 | border-top-left-radius: 100%; 1710 | background: #383B44; 1711 | left: 32%; 1712 | -webkit-transform-origin: top left; 1713 | transform-origin: top left; 1714 | -webkit-transform: rotate(-5deg); 1715 | transform: rotate(-5deg); 1716 | } 1717 | .husky-ear + .husky-ear { 1718 | -webkit-animation: husky-right-ear 12s both infinite; 1719 | animation: husky-right-ear 12s both infinite; 1720 | background-color: #2c2f36; 1721 | left: 15%; 1722 | top: 5%; 1723 | z-index: -1; 1724 | -webkit-transform-origin: right center; 1725 | transform-origin: right center; 1726 | } 1727 | .husky-ear + .husky-ear:before { 1728 | border-color: #2c2f36; 1729 | } 1730 | .husky-ear + .husky-ear:after { 1731 | background: #2c2f36; 1732 | } 1733 | 1734 | .husky-mouth { 1735 | z-index: 1; 1736 | -webkit-animation: husky-mouth 12s none infinite; 1737 | animation: husky-mouth 12s none infinite; 1738 | position: absolute; 1739 | width: 48%; 1740 | height: 55%; 1741 | bottom: -5%; 1742 | left: 28%; 1743 | overflow: hidden; 1744 | } 1745 | .husky-mouth:before, .husky-mouth:after { 1746 | -webkit-animation: husky-mouth-cover-left 12s none infinite; 1747 | animation: husky-mouth-cover-left 12s none infinite; 1748 | width: 28%; 1749 | height: 100%; 1750 | background: white; 1751 | top: -50%; 1752 | left: 0; 1753 | z-index: 3; 1754 | -webkit-transform-origin: right top; 1755 | transform-origin: right top; 1756 | } 1757 | .husky-mouth:after { 1758 | -webkit-animation: husky-mouth-cover-right 12s none infinite; 1759 | animation: husky-mouth-cover-right 12s none infinite; 1760 | left: initial; 1761 | right: 0; 1762 | -webkit-transform-origin: left top; 1763 | transform-origin: left top; 1764 | } 1765 | 1766 | .husky-lips { 1767 | z-index: 2; 1768 | height: 35%; 1769 | width: 100%; 1770 | } 1771 | .husky-lips:before, .husky-lips:after { 1772 | background: white; 1773 | width: calc(50% + 1.5px); 1774 | border-color: #A3ADBB; 1775 | border-width: 0.3vmin; 1776 | border-style: solid; 1777 | height: 100%; 1778 | border-bottom-left-radius: 65% 100%; 1779 | border-bottom-right-radius: 35% 50%; 1780 | border-top-right-radius: 50%; 1781 | border-right-color: transparent; 1782 | border-top-color: transparent; 1783 | } 1784 | .husky-lips:after { 1785 | -webkit-transform: rotateY(180deg); 1786 | transform: rotateY(180deg); 1787 | left: initial; 1788 | right: 0; 1789 | } 1790 | 1791 | @supports (-moz-appearance: none) and (display: contents) { 1792 | .husky-lips:before, .husky-lips:after { 1793 | width: calc(50% + 4px); 1794 | } 1795 | } 1796 | .husky-tongue { 1797 | -webkit-animation: husky-tongue 12s none infinite; 1798 | animation: husky-tongue 12s none infinite; 1799 | position: absolute; 1800 | height: 100%; 1801 | width: 44%; 1802 | background: #DE6465; 1803 | left: 25%; 1804 | bottom: 100%; 1805 | z-index: 1; 1806 | border-bottom-left-radius: 50% 20%; 1807 | border-bottom-right-radius: 50% 20%; 1808 | } 1809 | 1810 | .husky-body { 1811 | -webkit-animation: husky-body 12s none infinite; 1812 | animation: husky-body 12s none infinite; 1813 | width: 45%; 1814 | height: 100%; 1815 | position: absolute; 1816 | left: 25%; 1817 | } 1818 | 1819 | .husky-torso { 1820 | position: absolute; 1821 | height: 55%; 1822 | width: 100%; 1823 | bottom: 0; 1824 | } 1825 | .husky-torso:before { 1826 | background: #383B44; 1827 | height: 100%; 1828 | width: 50%; 1829 | -webkit-transform: translateX(-20%) skewX(-30deg); 1830 | transform: translateX(-20%) skewX(-30deg); 1831 | -webkit-transform-origin: left bottom; 1832 | transform-origin: left bottom; 1833 | border-radius: 0 30% 0 60%; 1834 | } 1835 | .husky-torso:after { 1836 | background: #383B44; 1837 | height: 100%; 1838 | width: 60%; 1839 | top: 0; 1840 | right: 0; 1841 | border-radius: 10% 40% 60% 0; 1842 | } 1843 | 1844 | .husky-mane { 1845 | -webkit-animation: husky-mane 12s none infinite; 1846 | animation: husky-mane 12s none infinite; 1847 | z-index: 2; 1848 | position: absolute; 1849 | width: 31.5%; 1850 | height: 30%; 1851 | top: 44%; 1852 | left: 37%; 1853 | } 1854 | .husky-mane:before { 1855 | background: white; 1856 | height: 40%; 1857 | width: 100%; 1858 | border-top-left-radius: 10% 50%; 1859 | border-top-right-radius: 20% 100%; 1860 | border-bottom-left-radius: 10% 50%; 1861 | } 1862 | .husky-mane:after { 1863 | background: white; 1864 | top: 25%; 1865 | height: 76%; 1866 | width: 30%; 1867 | right: 23%; 1868 | border-top-right-radius: 100% 80%; 1869 | -webkit-transform: rotate(47deg); 1870 | transform: rotate(47deg); 1871 | -webkit-transform-origin: bottom right; 1872 | transform-origin: bottom right; 1873 | } 1874 | 1875 | .husky-coat { 1876 | position: absolute; 1877 | width: 50%; 1878 | height: 50%; 1879 | background: white; 1880 | -webkit-transform-origin: bottom right; 1881 | transform-origin: bottom right; 1882 | left: 10%; 1883 | top: 21%; 1884 | -webkit-transform: rotate(25deg) skewX(-30deg); 1885 | transform: rotate(25deg) skewX(-30deg); 1886 | } 1887 | 1888 | .husky-legs { 1889 | background-color: #383B44; 1890 | position: absolute; 1891 | height: 30%; 1892 | width: 42%; 1893 | left: 23%; 1894 | bottom: 0; 1895 | border-top-left-radius: 20% 37%; 1896 | border-bottom-left-radius: 10% 37%; 1897 | border-top-right-radius: 50%; 1898 | z-index: 1; 1899 | } 1900 | 1901 | .husky-front-legs { 1902 | position: absolute; 1903 | width: 55%; 1904 | height: 120%; 1905 | bottom: 0; 1906 | right: -12%; 1907 | } 1908 | .husky-front-legs:before { 1909 | width: 4%; 1910 | height: 6%; 1911 | background: transparent; 1912 | bottom: 0; 1913 | left: 47%; 1914 | box-shadow: -1.3vmin 0 0 #A3ADBB, -2.8vmin 0 0 #A3ADBB, 1.3vmin 0 0 #383B44, 2.8vmin 0 0 #383B44; 1915 | z-index: 2; 1916 | } 1917 | .husky-front-legs > .husky-leg { 1918 | width: 51%; 1919 | height: 100%; 1920 | position: absolute; 1921 | bottom: -1px; 1922 | right: 50%; 1923 | overflow: hidden; 1924 | } 1925 | .husky-front-legs > .husky-leg:before { 1926 | background: #B9C4D3; 1927 | height: 100%; 1928 | width: 100%; 1929 | -webkit-transform: skewY(-30deg) skewX(10deg); 1930 | transform: skewY(-30deg) skewX(10deg); 1931 | -webkit-transform-origin: top right; 1932 | transform-origin: top right; 1933 | } 1934 | .husky-front-legs > .husky-leg + .husky-leg { 1935 | right: 0; 1936 | -webkit-transform: rotateY(180deg); 1937 | transform: rotateY(180deg); 1938 | } 1939 | .husky-front-legs > .husky-leg + .husky-leg:before { 1940 | background: #A3ADBB; 1941 | } 1942 | 1943 | .husky-hind-leg { 1944 | position: absolute; 1945 | background: #A3ADBB; 1946 | width: 35%; 1947 | height: 25%; 1948 | border-top-left-radius: 35% 100%; 1949 | border-top-right-radius: 40% 100%; 1950 | bottom: 0%; 1951 | right: 45%; 1952 | } 1953 | .husky-hind-leg:before { 1954 | width: 6%; 1955 | height: 20%; 1956 | background: transparent; 1957 | bottom: 0; 1958 | left: 70%; 1959 | box-shadow: -0.8vmin 0 0 #383B44, 0.8vmin 0 0 #383B44; 1960 | } 1961 | 1962 | .husky-tail { 1963 | position: absolute; 1964 | width: 15%; 1965 | height: 6%; 1966 | bottom: 0; 1967 | right: 72%; 1968 | background: #2c2f36; 1969 | z-index: 0; 1970 | } 1971 | .husky-tail > .husky-tail { 1972 | -webkit-animation: husky-tail 12s none infinite; 1973 | animation: husky-tail 12s none infinite; 1974 | height: 100%; 1975 | width: 3.2vmin; 1976 | right: 26%; 1977 | -webkit-transform-origin: center right; 1978 | transform-origin: center right; 1979 | border-top-left-radius: 50% 50%; 1980 | border-bottom-left-radius: 50% 50%; 1981 | -webkit-transform: rotate(26deg); 1982 | transform: rotate(26deg); 1983 | -webkit-transform: rotate(0deg); 1984 | transform: rotate(0deg); 1985 | } 1986 | .husky > .husky-tail { 1987 | border-top-left-radius: 10% 50%; 1988 | border-bottom-left-radius: 10% 50%; 1989 | } 1990 | .husky > .husky-tail > .husky-tail { 1991 | right: 88%; 1992 | } 1993 | 1994 | .snow { 1995 | position: absolute; 1996 | top: 0; 1997 | left: 0; 1998 | width: 100%; 1999 | height: 100%; 2000 | z-index: 5; 2001 | pointer-events: none; 2002 | } 2003 | .snow:before, .snow:after { 2004 | content: ''; 2005 | display: block; 2006 | position: absolute; 2007 | top: 0; 2008 | left: 0; 2009 | z-index: 10; 2010 | width: 1vmin; 2011 | height: 1vmin; 2012 | background-color: rgba(255, 255, 255, 0.8); 2013 | border-radius: 50%; 2014 | -webkit-animation: snow 5s linear infinite; 2015 | animation: snow 5s linear infinite; 2016 | box-shadow: 3.91111vw 245.8998vh rgba(255, 255, 255, 0.8), 3.91111vw 545.8998vh rgba(255, 255, 255, 0.8), 70.99774vw 180.31036vh rgba(255, 255, 255, 0.8), 70.99774vw 480.31036vh rgba(255, 255, 255, 0.8), 55.78309vw 288.80557vh rgba(255, 255, 255, 0.8), 55.78309vw 588.80557vh rgba(255, 255, 255, 0.8), 86.58933vw 46.27482vh rgba(255, 255, 255, 0.8), 86.58933vw 346.27482vh rgba(255, 255, 255, 0.8), 75.60534vw 120.88882vh rgba(255, 255, 255, 0.8), 75.60534vw 420.88882vh rgba(255, 255, 255, 0.8), 15.67908vw 70.68818vh rgba(255, 255, 255, 0.8), 15.67908vw 370.68818vh rgba(255, 255, 255, 0.8), 64.41027vw 191.70469vh rgba(255, 255, 255, 0.8), 64.41027vw 491.70469vh rgba(255, 255, 255, 0.8), 8.1549vw 72.65432vh rgba(255, 255, 255, 0.8), 8.1549vw 372.65432vh rgba(255, 255, 255, 0.8), 85.97571vw 128.51062vh rgba(255, 255, 255, 0.8), 85.97571vw 428.51062vh rgba(255, 255, 255, 0.8), 91.5837vw 242.98903vh rgba(255, 255, 255, 0.8), 91.5837vw 542.98903vh rgba(255, 255, 255, 0.8), 17.96334vw 292.03883vh rgba(255, 255, 255, 0.8), 17.96334vw 592.03883vh rgba(255, 255, 255, 0.8), 9.65553vw 226.66542vh rgba(255, 255, 255, 0.8), 9.65553vw 526.66542vh rgba(255, 255, 255, 0.8), 16.89644vw 277.85146vh rgba(255, 255, 255, 0.8), 16.89644vw 577.85146vh rgba(255, 255, 255, 0.8), 8.94213vw 35.30263vh rgba(255, 255, 255, 0.8), 8.94213vw 335.30263vh rgba(255, 255, 255, 0.8), 11.52322vw 151.9283vh rgba(255, 255, 255, 0.8), 11.52322vw 451.9283vh rgba(255, 255, 255, 0.8), 45.51635vw 244.93306vh rgba(255, 255, 255, 0.8), 45.51635vw 544.93306vh rgba(255, 255, 255, 0.8), 20.28839vw 121.51719vh rgba(255, 255, 255, 0.8), 20.28839vw 421.51719vh rgba(255, 255, 255, 0.8), 57.11853vw 68.09992vh rgba(255, 255, 255, 0.8), 57.11853vw 368.09992vh rgba(255, 255, 255, 0.8), 51.51051vw 258.40299vh rgba(255, 255, 255, 0.8), 51.51051vw 558.40299vh rgba(255, 255, 255, 0.8), 40.29683vw 172.06081vh rgba(255, 255, 255, 0.8), 40.29683vw 472.06081vh rgba(255, 255, 255, 0.8), 43.32197vw 94.4853vh rgba(255, 255, 255, 0.8), 43.32197vw 394.4853vh rgba(255, 255, 255, 0.8), 23.46838vw 44.06021vh rgba(255, 255, 255, 0.8), 23.46838vw 344.06021vh rgba(255, 255, 255, 0.8), 30.31595vw 158.89818vh rgba(255, 255, 255, 0.8), 30.31595vw 458.89818vh rgba(255, 255, 255, 0.8), 87.68665vw 64.25318vh rgba(255, 255, 255, 0.8), 87.68665vw 364.25318vh rgba(255, 255, 255, 0.8), 11.02254vw 249.52319vh rgba(255, 255, 255, 0.8), 11.02254vw 549.52319vh rgba(255, 255, 255, 0.8), 77.85455vw 76.94451vh rgba(255, 255, 255, 0.8), 77.85455vw 376.94451vh rgba(255, 255, 255, 0.8), 34.06824vw 218.15998vh rgba(255, 255, 255, 0.8), 34.06824vw 518.15998vh rgba(255, 255, 255, 0.8), 18.0547vw 69.94775vh rgba(255, 255, 255, 0.8), 18.0547vw 369.94775vh rgba(255, 255, 255, 0.8), 19.32592vw 220.35255vh rgba(255, 255, 255, 0.8), 19.32592vw 520.35255vh rgba(255, 255, 255, 0.8), 72.48865vw 287.26826vh rgba(255, 255, 255, 0.8), 72.48865vw 587.26826vh rgba(255, 255, 255, 0.8), 22.14409vw 179.66799vh rgba(255, 255, 255, 0.8), 22.14409vw 479.66799vh rgba(255, 255, 255, 0.8), 23.9237vw 155.76226vh rgba(255, 255, 255, 0.8), 23.9237vw 455.76226vh rgba(255, 255, 255, 0.8), 47.29806vw 209.94739vh rgba(255, 255, 255, 0.8), 47.29806vw 509.94739vh rgba(255, 255, 255, 0.8), 18.35855vw 162.07255vh rgba(255, 255, 255, 0.8), 18.35855vw 462.07255vh rgba(255, 255, 255, 0.8), 14.90633vw 53.43779vh rgba(255, 255, 255, 0.8), 14.90633vw 353.43779vh rgba(255, 255, 255, 0.8), 35.05484vw 14.82238vh rgba(255, 255, 255, 0.8), 35.05484vw 314.82238vh rgba(255, 255, 255, 0.8), 74.68529vw 285.1215vh rgba(255, 255, 255, 0.8), 74.68529vw 585.1215vh rgba(255, 255, 255, 0.8), 2.01787vw 8.44054vh rgba(255, 255, 255, 0.8), 2.01787vw 308.44054vh rgba(255, 255, 255, 0.8), 75.86686vw 93.03489vh rgba(255, 255, 255, 0.8), 75.86686vw 393.03489vh rgba(255, 255, 255, 0.8), 87.23493vw 255.41546vh rgba(255, 255, 255, 0.8), 87.23493vw 555.41546vh rgba(255, 255, 255, 0.8); 2017 | } 2018 | .snow:after { 2019 | width: 1.1vmin; 2020 | height: 8px; 2021 | -webkit-animation-duration: 6s; 2022 | animation-duration: 6s; 2023 | } 2024 | 2025 | @-webkit-keyframes snow { 2026 | from { 2027 | -webkit-transform: rotate(10deg) translateY(-300vh); 2028 | transform: rotate(10deg) translateY(-300vh); 2029 | } 2030 | to { 2031 | -webkit-transform: rotate(10deg) translateY(0); 2032 | transform: rotate(10deg) translateY(0); 2033 | } 2034 | } 2035 | 2036 | @keyframes snow { 2037 | from { 2038 | -webkit-transform: rotate(10deg) translateY(-300vh); 2039 | transform: rotate(10deg) translateY(-300vh); 2040 | } 2041 | to { 2042 | -webkit-transform: rotate(10deg) translateY(0); 2043 | transform: rotate(10deg) translateY(0); 2044 | } 2045 | } 2046 | @-webkit-keyframes squigglevision { 2047 | 0% { 2048 | -webkit-filter: url("#squiggly-0"); 2049 | filter: url("#squiggly-0"); 2050 | } 2051 | 25% { 2052 | -webkit-filter: url("#squiggly-1"); 2053 | filter: url("#squiggly-1"); 2054 | } 2055 | 50% { 2056 | -webkit-filter: url("#squiggly-2"); 2057 | filter: url("#squiggly-2"); 2058 | } 2059 | 75% { 2060 | -webkit-filter: url("#squiggly-3"); 2061 | filter: url("#squiggly-3"); 2062 | } 2063 | 100% { 2064 | -webkit-filter: url("#squiggly-4"); 2065 | filter: url("#squiggly-4"); 2066 | } 2067 | } 2068 | @keyframes squigglevision { 2069 | 0% { 2070 | -webkit-filter: url("#squiggly-0"); 2071 | filter: url("#squiggly-0"); 2072 | } 2073 | 25% { 2074 | -webkit-filter: url("#squiggly-1"); 2075 | filter: url("#squiggly-1"); 2076 | } 2077 | 50% { 2078 | -webkit-filter: url("#squiggly-2"); 2079 | filter: url("#squiggly-2"); 2080 | } 2081 | 75% { 2082 | -webkit-filter: url("#squiggly-3"); 2083 | filter: url("#squiggly-3"); 2084 | } 2085 | 100% { 2086 | -webkit-filter: url("#squiggly-4"); 2087 | filter: url("#squiggly-4"); 2088 | } 2089 | } 2090 | *, *:before, *:after { 2091 | box-sizing: border-box; 2092 | position: relative; 2093 | } 2094 | -------------------------------------------------------------------------------- /css/husky.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["../scss/husky.scss","../node_modules/sass-svg/scss/main.scss"], 5 | "names": [], 6 | "file": "husky.css" 7 | } -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedAnimals/b3e6c6e4e114272cca37409242814b767e76b466/favicon.ico -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedAnimals/b3e6c6e4e114272cca37409242814b767e76b466/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedAnimals/b3e6c6e4e114272cca37409242814b767e76b466/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedAnimals/b3e6c6e4e114272cca37409242814b767e76b466/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedAnimals/b3e6c6e4e114272cca37409242814b767e76b466/img/landscape.jpg -------------------------------------------------------------------------------- /img/link-fox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedAnimals/b3e6c6e4e114272cca37409242814b767e76b466/img/link-fox.png -------------------------------------------------------------------------------- /img/link-husky.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/AnimatedAnimals/b3e6c6e4e114272cca37409242814b767e76b466/img/link-husky.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animated Animals | Alex the CSS Husky | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 |
22 |
23 |
24 |
25 | Previous Demo 26 | Back to the Codrops article 27 |
28 |

Animated Animals

29 | 33 |

Please view on a desktop
(Chrome only)

34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 |
105 |
106 | 107 | 108 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animated Animals | Felix the CSS/SVG Fox | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 |
22 |
23 |
24 | Previous Demo 25 | Back to the Codrops article 26 |
27 |

Animated Animals

28 | 32 |

Please view on a desktop
(Chrome only)

33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 |
92 |
93 | 94 | 95 | -------------------------------------------------------------------------------- /scss/__svg.scss: -------------------------------------------------------------------------------- 1 | @import '../../sassdash/index'; 2 | 3 | $_SVG_STACK: null !global; 4 | 5 | @mixin svg($type: 'svg', $attrs: null) { 6 | $previous: $_SVG_STACK; 7 | $_SVG_STACK: () !global; 8 | 9 | @content; 10 | 11 | // Argument juggling 12 | @if (type-of($type) == 'map' 13 | and not $attrs 14 | and not $previous 15 | ) { 16 | $attrs: $type; 17 | $type: 'svg'; 18 | } 19 | 20 | $element: ( 21 | type: $type, 22 | attrs: $attrs, 23 | children: $_SVG_STACK 24 | ); 25 | 26 | @if $previous != null { 27 | $_SVG_STACK: $previous !global; 28 | 29 | $_SVG_STACK: append($_SVG_STACK, $element) !global; 30 | } @else { 31 | $element-attrs: map-merge(_get($element, 'attrs'), (xmlns: 'http://www.w3.org/2000/svg')); 32 | 33 | $element: map-merge($element, (attrs: $element-attrs)); 34 | 35 | background-image: url("data:image/svg+xml;charset=utf8,#{_encode(svg-render($element))}"); 36 | 37 | $_SVG_STACK: null !global; 38 | } 39 | } 40 | 41 | @function svg-render($element, $args...) { 42 | $type: _get($element, 'type'); 43 | $attrs: _($element, 44 | _get 'attrs', 45 | _map svg-render-attr, 46 | _join ' '); 47 | $children: if(length(_get($element, 'children')) > 0, 48 | _($element, 49 | _get 'children', 50 | _map svg-render, 51 | _join), 52 | _get($element, 'attrs.content')); 53 | 54 | @return if($children and _size($children) > 0, 55 | '<#{$type} #{$attrs}>#{$children}', 56 | '<#{$type} #{$attrs}/>'); 57 | } 58 | 59 | @function svg-render-attr($value, $key, $args...) { 60 | @if (type-of($value) != 'color') { 61 | $value: _replace($value, '\A', ' '); 62 | } 63 | 64 | @return '#{$key}="#{$value}"'; 65 | } 66 | -------------------------------------------------------------------------------- /scss/fox.scss: -------------------------------------------------------------------------------- 1 | @import '../node_modules/sass-svg/index'; 2 | 3 | $color-fox: #e37c67; 4 | $color-text: #84899C; 5 | $color-nose: #575A57; 6 | $duration: 17s; 7 | 8 | $size: 0.07; 9 | 10 | *, *:before, *:after { 11 | position: relative; 12 | } 13 | 14 | body { 15 | background: white; 16 | } 17 | 18 | .codrops-header h1 { 19 | animation: squigglevision 0.3s infinite; 20 | animation-timing-function: cubic-bezier(0, 0, 0.80, 0.90); 21 | } 22 | 23 | .content--fox { 24 | background: #99bfcf url('../img/landscape.jpg') no-repeat 50% 100%; 25 | background-size: cover; 26 | position: absolute; 27 | pointer-events: none; 28 | top: 0; 29 | width: 100%; 30 | height: 100vh; 31 | overflow: hidden; 32 | left: 50%; 33 | transform: translateX(-50%); 34 | 35 | &:after { 36 | content: ''; 37 | position: absolute; 38 | top: 0; 39 | left: 0; 40 | width: 100%; 41 | height: 100%; 42 | background-position: bottom center; 43 | background-repeat: no-repeat; 44 | background-size: cover; 45 | 46 | @include svg((viewBox: (0 0 1290 900))) { 47 | @include svg('path', ( 48 | fill: #7e8841, 49 | d: 'M1290,764.1V900H0V722c115.2,0,514.2,135.7,698,134.8C903.5,855.7,1223.5,764.1,1290,764.1z' 50 | )); 51 | 52 | @include svg('path', ( 53 | fill: #4f6333, 54 | d: 'M6,900c0,0,209.1-96.7,417.9-88.5c180.9,7.1,230.7,64.4,442.4,60.9c68.2-1.1,126.6-8.1,233.7-1.5c71.8,4.5,190,29,190,29H6z' 55 | )); 56 | } 57 | } 58 | } 59 | 60 | .fox { 61 | position: absolute; 62 | height: 375vmax * $size; 63 | width: 260vmax * $size; 64 | animation: fox $duration none, squigglevision 0.3s infinite; 65 | animation-timing-function: cubic-bezier(0, 0, 0.80, 0.90); 66 | bottom: 2.5vmax; 67 | left: 60%; 68 | transform-origin: bottom right; 69 | 70 | *, *:before, *:after { 71 | animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important; 72 | } 73 | 74 | * { 75 | position: absolute; 76 | background-size: contain; 77 | background-repeat: no-repeat; 78 | transform-style: preserve-3d; 79 | 80 | &:before, &:after { 81 | content: ''; 82 | position: absolute; 83 | display: block; 84 | background-size: contain; 85 | background-repeat: no-repeat; 86 | height: 100%; 87 | width: 100%; 88 | } 89 | } 90 | } 91 | 92 | .fox-head { 93 | transform: translateZ(200px); 94 | animation: head $duration forwards; 95 | height: 168vmax * $size; 96 | width: 168vmax * $size; 97 | top: 0; 98 | left: 0; 99 | } 100 | 101 | .fox-face { 102 | perspective: 1000vmax * $size; 103 | 104 | &, > * { 105 | height: 100%; 106 | width: 100%; 107 | background-size: contain; 108 | } 109 | } 110 | 111 | .fox-ears { 112 | transform: translateZ((-168vmax * $size) / 2); 113 | animation: ears $duration infinite none; 114 | } 115 | 116 | .fox-ear { 117 | height: 100%; 118 | width: 100%; 119 | } 120 | 121 | .fox-ear:first-child { 122 | animation: ear-left $duration infinite none; 123 | 124 | @include svg((viewBox: (0 0 168 168))) { 125 | @include svg('path', ( 126 | fill: darken($color-fox,5%), 127 | d: 'M48.7,84.4c0,0-35.5,4.6-40-10.8s-8-57.2-2.5-70.9c0,0,66.7,34,66.7,52S48.7,84.4,48.7,84.4z' 128 | )); 129 | } 130 | } 131 | 132 | .fox-ear:last-child { 133 | animation: ear-right $duration infinite none; 134 | 135 | @include svg((viewBox: (0 0 168 168))) { 136 | @include svg('path', ( 137 | fill: darken($color-fox,5%), 138 | d: 'M118.8,84.4c0,0,35.5,4.6,40-10.8s8-57.2,2.5-70.9c0,0-66.8,34-66.8,52S118.8,84.4,118.8,84.4z' 139 | )); 140 | } 141 | } 142 | 143 | .fox-skull { 144 | @include svg((viewBox: (0 0 168 168))) { 145 | @include svg('path', ( 146 | fill: $color-fox, 147 | id: 'circle', 148 | d: 'M83.7,157.4c11.3,0,77.9-2.3,77.9-39.3c0,0,3.7,1,3.7,4.3c0,0,2.1-3.3,2.1-10.3s-9.3-78.2-83.7-78.2 S0,105.1,0,112.1s2.1,10.3,2.1,10.3c0-3.3,3.7-4.3,3.7-4.3C5.8,155.1,72.4,157.4,83.7,157.4z' 149 | )); 150 | 151 | @include svg('path', ( 152 | fill: white, 153 | d: 'M83.7,139.9c38.2,0,40.1,6.9,40.1,6.9v5.7c-1.2,4.9-35.2,7.4-40.1,7.4s-39-2.6-40.1-7.4v-5.7 C43.6,146.9,45.5,139.9,83.7,139.9z' 154 | )) 155 | } 156 | background-size: contain; 157 | } 158 | 159 | .fox-front { 160 | animation: front $duration infinite none; 161 | transform-origin: bottom center; 162 | 163 | &:after { 164 | animation: front-after $duration infinite none; 165 | transform-origin: bottom right; 166 | @include svg((viewBox: (0 0 168 168))) { 167 | @include svg('path', ( 168 | fill: white, 169 | d: 'M83.7,154.4c14,0,71,0.1,70.3-38.5l3.8-1.5c0,0-24.1-35.5-74-35.5s-74,35.5-74,35.5l3.8,1.5 C12.7,154.5,69.7,154.4,83.7,154.4z' 170 | )); 171 | } 172 | } 173 | 174 | &:before { 175 | animation: front-before $duration infinite none; 176 | transform-origin: right top; 177 | height: 81vmax * $size; 178 | width: 110vmax * $size; 179 | bottom: 8vmax * $size; 180 | left: -26vmax * $size; 181 | transform: rotateY(90deg); 182 | 183 | @include svg((viewBox: (-337 181.6 115.7 81))) { 184 | @include svg('path', ( 185 | fill: white, 186 | d: 'M-221.3,183.1c-33.5-3-115.7-2-115.7,7c0,40.5,69.3,49.1,79.2,59c13.1,13.1,36.5,13.5,36.5,13.5V183.1z' 187 | )); 188 | } 189 | } 190 | } 191 | 192 | .fox-nose { 193 | animation: nose $duration infinite none; 194 | 195 | &:before { 196 | transform: translateZ(150vmax * $size) scale(0.8); 197 | 198 | @include svg((viewBox: (0 0 168 168))) { 199 | @include svg('path', ( 200 | fill: $color-nose, 201 | d: 'M83.7,86.7c3.3,0,11.6-3.9,11.6-7.1c0-3.2-9.4-3.2-11.6-3.2c-2.2,0-11.6,0-11.6,3.2 C72.1,82.8,80.4,86.7,83.7,86.7z' 202 | )); 203 | @include svg('path', ( 204 | stroke: $color-nose, 205 | d: 'M83.7,102.3V86.7' 206 | )); 207 | @include svg('path', ( 208 | stroke: $color-nose, 209 | fill: none, 210 | d: 'M94.5,104.9c0,0-5.2-2.7-10.8-2.7c-5.6,0-10.8,2.7-10.8,2.7' 211 | )); 212 | } 213 | } 214 | } 215 | 216 | .fox-eyes { 217 | animation: eyes $duration infinite none; 218 | transform-origin: center 70vmax * $size; 219 | 220 | &:before { 221 | transform: translateZ(100vmax * $size) scale(0.8); 222 | 223 | @include svg((viewBox: (0 0 168 168))) { 224 | @include svg('circle', ( 225 | cx: 58.9, 226 | cy: 68, 227 | r: 5.4 228 | )); 229 | 230 | @include svg('circle', ( 231 | cx: 108.6, 232 | cy: 68, 233 | r: 5.4 234 | )); 235 | } 236 | } 237 | } 238 | 239 | .fox-body { 240 | perspective: 1000vmax * $size; 241 | animation: body $duration forwards; 242 | height: 246vmax * $size; 243 | width: 160vmax * $size; 244 | top: 110vmax * $size; 245 | left: 36vmax * $size; 246 | transform-origin: top center; 247 | 248 | &:before { 249 | height: 100%; 250 | width: 100%; 251 | 252 | @include svg((viewBox: (0 0 160 246))) { 253 | @include svg('path', ( 254 | fill: $color-fox, 255 | d: 'M94.5,50.8c0,33,22.5,66.8,33.3,77.7s32.3,40.3,32.3,71.7s-14.3,46-32.8,46c-42.5,0-103.8-71.7-103.8-114.7 S17.1,47.8,2.9,33.6S29.1,0,51.5,0s60.2,13,60.2,21.9S94.5,33.8,94.5,50.8z')); 256 | 257 | @include svg('path', ( 258 | fill: #E1E1E1, 259 | d: 'M107.4,241.7C67.9,225.4,23.5,168,23.5,131.4c0-43-6.4-83.6-20.5-97.8S29.1,0,51.5,0s41.2,13,41.2,21.9 S77.8,53.8,77.8,70.8c0,33,10.2,51.5,21.1,62.3s25.6,55.7,25.6,70.3C124.4,222.8,107.4,241.7,107.4,241.7z')); 260 | 261 | @include svg('path', ( 262 | fill: white, 263 | d: 'M0,26.5c0,16.2,17.6,25.2,17.5,52.9c-0.1,20-4.7,29.9-4.7,43.6s6.6,48,37.6,56.4c0,0,0.7-5,3.7-5 s8,7.3,14.3,7.3c0,0-0.7-5.7,1.7-5.7s5.5,4.3,9.9,4.3c0,0-1.7-8.9,2.6-13.2c0,0,0.5,3,2.5,3c0,0,1.8-5,4.5-6.5s9.2-8.8,9.2-14.8 s-18.8-44.9-18.8-70.8s12.6-32.5,12.6-53.5S58.9,0,47.4,0S0,9,0,26.5z')); 264 | } 265 | } 266 | } 267 | 268 | .fox-front-leg { 269 | top: 120vmax * $size; 270 | left: 15vmax * $size; 271 | height: 130vmax * $size; 272 | width: 42vmax * $size; 273 | transform-origin: center top; 274 | 275 | &:before, &:after { 276 | transform-origin: 40vmax * $size 63%; 277 | height: 100%; 278 | width: 100%; 279 | } 280 | 281 | @include svg((viewBox: (0 0 42 130))) { 282 | @include svg('path', ( 283 | fill: $color-fox, 284 | d: 'M22.6,97.5c15.2,0,16-32,16-32S37.8,42,41.3,31S19.4,0,7.6,0C-4.1,0,0.3,20,3.8,31s2.8,34.5,2.8,34.5 S7.3,97.5,22.6,97.5z')); 285 | } 286 | 287 | &:before { 288 | @include svg((viewBox: (0 0 42 130))) { 289 | @include svg('path', ( 290 | fill: $color-fox, 291 | d: 'M22.6,129.7c9.5,0,11.2-7.3,11.2-9.3s2.2-36.2,0-40.5c-2.2-4.3-2.5-6.3-11.2-6.3s-9,2-11.2,6.3 c-2.2,4.3,0,38.5,0,40.5S13.1,129.7,22.6,129.7z')); 292 | } 293 | } 294 | 295 | &:first-child { 296 | animation: upper-left-leg $duration forwards; 297 | z-index: -1; 298 | 299 | &:before { 300 | animation: lower-left-leg $duration forwards; 301 | } 302 | } 303 | 304 | &:nth-child(2) { 305 | animation: upper-right-leg $duration forwards; 306 | 307 | &:before { 308 | animation: lower-right-leg $duration forwards; 309 | } 310 | } 311 | 312 | + .fox-front-leg { 313 | left: 90vmax * $size; 314 | z-index: 1; 315 | } 316 | } 317 | 318 | .fox-tail { 319 | z-index: -1; 320 | $initial-tail-width: 40vmax * $size; 321 | width: $initial-tail-width; 322 | height: $initial-tail-width; 323 | transform-origin: center bottom; 324 | 325 | &:before { 326 | transform-origin: center bottom; 327 | 328 | @include svg((viewBox: (0 0 66.4 66.4))) { 329 | @include svg('path', ( 330 | fill: $color-fox, 331 | d: 'M33.2,0C14.9,0,0,14.9,0,33.2C0,42.7,0.9,61,2.6,66.4h30.6h30.6c1.7-5.3,2.6-23.7,2.6-33.2 C66.4,14.9,51.5,0,33.2,0z')); 332 | } 333 | } 334 | 335 | .fox > & { 336 | transform: rotate(90deg); 337 | top: 280vmax * $size; 338 | left: 160vmax * $size; 339 | } 340 | 341 | > .fox-tail { 342 | animation: tail-inner 3s ease-in-out both infinite; 343 | top: -$initial-tail-width / 2; 344 | transform: 345 | scale(1.1) 346 | rotate(-35deg); 347 | } 348 | 349 | > .fox-tail > .fox-tail > .fox-tail > .fox-tail { 350 | // opacity: 0.5; 351 | animation: tail-outer 3s ease-in-out both infinite; 352 | transform: 353 | scale(1.1) 354 | rotate(15deg); 355 | } 356 | } 357 | 358 | @keyframes tail-inner { 359 | 0% { transform: scale(1.1) rotate(-38deg); } 360 | 50% { transform: scale(1.1) rotate(-35deg); } 361 | 100% { transform: scale(1.1) rotate(-38deg); } 362 | } 363 | 364 | @keyframes tail-outer { 365 | 0% { transform: scale(1.1) rotate(-3deg); } 366 | 50% { transform: scale(1.1) rotate(15deg); } 367 | 100% { transform: scale(1.1) rotate(-3deg); } 368 | } 369 | 370 | $offset-stop-walking: 5s; 371 | 372 | $animations: ( 373 | 'fox': ( 374 | 0s: unquote('scale(0.55); opacity: 0'), 375 | 1s: unquote('scale(0.6); opacity: 1'), 376 | 2s: scale(0.7), 377 | 3s: scale(0.825), 378 | 4s: scale(0.95), 379 | 4.7s: unquote('scale(1); animation-timing-function: ease-in-out') 380 | ), 381 | 'body': ( 382 | (1s, 2s, 3s, 4s): translateY(5vmax * $size), 383 | (1.2s, 2.2s, 3.2s, 4.2s): translateY(0), 384 | ), 385 | 'head': ( 386 | (1s, 2s, 3s, 4s): translateY(10vmax * $size), 387 | (1.2s, 2.2s, 3.2s, 4.2s): translateY(0), 388 | ), 389 | 'upper-left-leg': ( 390 | 0s: rotate(0), 391 | 1s: rotate(15deg), 392 | 2s: rotate(0), 393 | 3s: rotate(15deg), 394 | 4s: rotate(0), 395 | (4.5s, $duration): rotate(-5deg) 396 | ), 397 | 'lower-left-leg': ( 398 | 0s: rotate(0), 399 | 1s: rotate(-15deg), 400 | 2s: rotate(0), 401 | 3s: rotate(-15deg), 402 | (4s, $duration): rotate(0), 403 | ), 404 | 'upper-right-leg': ( 405 | 1s: rotate(0), 406 | 2s: rotate(20deg), 407 | 3s: rotate(0), 408 | 4s: rotate(20deg), 409 | (5s, $duration): rotate(10deg), 410 | ), 411 | 'lower-right-leg': ( 412 | 1s: rotate(0), 413 | 2s: rotate(-20deg), 414 | 3s: rotate(0), 415 | 4s: rotate(-20deg), 416 | (5s, $duration): rotate(-10deg) 417 | ), 418 | 'eyes': ( 419 | (2.5s, 3s, 4s, 5s, 7s): rotateY(-4deg), 420 | 2.75s: rotateY(-4deg) scaleY(0.2), 421 | 4.5s: rotateY(-4deg) rotateX(-3deg) scaleY(0.2), 422 | (7.5s, 9s): rotateY(-24deg) rotateZ(-12deg) rotateX(-2deg), 423 | (9.5s, 10.2s, 10.8s, 12s): rotateY(10deg) rotateX(1deg), 424 | 10.5s: rotateY(10deg) rotateX(1deg) scaleY(0.2), 425 | (13s, 14s): rotate(0), 426 | 13.5s: rotate(0) scaleY(0.2), 427 | ), 428 | 'nose': ( 429 | (2.5s, 4s, 5s, 7s): rotateY(-4deg), 430 | 4.5s: rotateY(-4deg) rotateX(-3deg), 431 | // look left 432 | (7.5s, 9s): rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg), 433 | // look right 434 | (9.5s, 12s): rotateY(7deg), 435 | 13s: rotateY(0), 436 | ), 437 | 'ears': ( 438 | (0s, 7s): translateZ((-168vmax * $size) / 2), 439 | (7.5s, 9s): translateZ((-168vmax * $size) / 2) rotateY(-40deg) rotateZ(-13deg), 440 | (9.5s, 12s): translateZ((-168vmax * $size) / 2) rotateY(-10deg) 441 | ), 442 | 'ear-left': ( 443 | (4s, 5.5s, 7s): rotate(10deg), 444 | 6s: rotate(5deg), 445 | (7.5s, 9s): rotateZ(14deg) scaleX(1.2), 446 | (9.5s, 12s): rotate(10deg) 447 | ), 448 | 'ear-right': ( 449 | (4s, 5.5s, 7s): rotate(-10deg), 450 | 6s: rotate(-5deg), 451 | (7.5s, 9s): translateX(-19vmax * $size) rotateZ(-7deg) scaleX(1.2), 452 | (9.5s, 12s): rotate(-10deg) 453 | ), 454 | 'front': ( 455 | (2.5s, 4s, 5s, 7s): translateX(-3vmax * $size) skewX(5deg) scaleX(0.9), 456 | 4.5s: translateX(-3vmax * $size) skewX(5deg) scaleX(0.9) scaleY(0.9), 457 | (7.5s, 9s): translateY(5vmax * $size), 458 | (9.5s, 12s): skewX(-10deg), 459 | 13s: skewX(0), 460 | ), 461 | 'front-before': ( 462 | 7s: rotateY(90deg), 463 | (7.5s, 9s): scaleY(1.1) rotateY(35deg), 464 | (9.5s, 12s, $duration): rotateY(90deg), 465 | ), 466 | 'front-after': ( 467 | 7s: skewX(0), 468 | (7.5s, 9s): skewX(10deg), 469 | 9.5s: skewX(0) 470 | ) 471 | ); 472 | 473 | @each $animation-name, $animation in $animations { 474 | @keyframes #{$animation-name} { 475 | @each $offsets, $transform in $animation { 476 | @each $offset in $offsets { 477 | #{percentage($offset / $duration)} { 478 | @if (type-of($transform) == 'number') { 479 | opacity: $transform; 480 | } @else { 481 | transform: #{$transform}; 482 | } 483 | } 484 | } 485 | } 486 | } 487 | } 488 | 489 | @keyframes squigglevision { 490 | 0% { 491 | -webkit-filter: url('#squiggly-0'); 492 | filter: url('#squiggly-0'); 493 | } 494 | 25% { 495 | -webkit-filter: url('#squiggly-1'); 496 | filter: url('#squiggly-1'); 497 | } 498 | 50% { 499 | -webkit-filter: url('#squiggly-2'); 500 | filter: url('#squiggly-2'); 501 | } 502 | 75% { 503 | -webkit-filter: url('#squiggly-3'); 504 | filter: url('#squiggly-3'); 505 | } 506 | 100% { 507 | -webkit-filter: url('#squiggly-4'); 508 | filter: url('#squiggly-4'); 509 | } 510 | } 511 | -------------------------------------------------------------------------------- /scss/husky.scss: -------------------------------------------------------------------------------- 1 | @import '../node_modules/sass-svg/index'; 2 | 3 | $husky-colors: ( 4 | 'bg': #4F8EDB, 5 | 'primary': #383B44, 6 | 'white': white, 7 | 'light': #A3ADBB, 8 | 'lighter': #B9C4D3, 9 | 'dark': darken(#383B44, 5%), 10 | 'ear': #DE6465, 11 | 'eye': #5D8BC3, 12 | 'tongue': #DE6465, 13 | 'snow': mix(white, #4F8EDB, 80%) 14 | ); 15 | 16 | @function husky-color($name) { 17 | @return map-get($husky-colors, $name); 18 | } 19 | 20 | $duration: 12s; 21 | $total-kf: 15; 22 | 23 | $k-head: ( 24 | 0: rotate(0), 25 | 1: rotate(0), 26 | 3: rotate(-14deg), 27 | 6: rotate(-7deg), 28 | 7: rotate(-14deg), 29 | 9: rotate(-7deg), 30 | 11: rotate(0), 31 | 12: rotate(0) 32 | ); 33 | 34 | $k-mouth: ( 35 | 0: translateX(0), 36 | 1: translateX(0), 37 | 2: translateX(35%), 38 | 3: translateX(35%), 39 | 4: translateX(35%), 40 | 5: translateX(0) translateY(-5%) 41 | ); 42 | 43 | $k-nose: ( 44 | 0: translate(0), 45 | 1: translate(0), 46 | 2: translateX(100%), 47 | 4: translateX(100%), 48 | 5: translateX(0) translateY(-15%) 49 | ); 50 | 51 | $k-body: ( 52 | 0: translate(0), 53 | 1: translateY(3%), 54 | 2: translate(0), 55 | 3: translate(0), 56 | 4: translateY(2%), 57 | 5: translateY(0), 58 | ); 59 | 60 | $k-mane: map-merge($k-body, ( 61 | 1: translateY(5%), 62 | 4: translateY(3%) 63 | )); 64 | 65 | $k-face: ( 66 | 0: translate(0), 67 | 1: translate(0), 68 | 2: translateX(15%), 69 | 3: translateX(15%) translateY(0), 70 | 4: translateX(15%) translateY(0), 71 | 5: translateX(0) translateY(-15%), 72 | 6: translateX(0) translateY(-15%), 73 | 7: translateX(0) translateY(0), 74 | ); 75 | 76 | $k-left-eye: ( 77 | 0.4: scaleY(1), 78 | 0.5: scaleY(0.3), 79 | 0.6: scaleY(1), 80 | 1: translateX(0), 81 | 1.4: scaleY(1) translateX(75%), 82 | 1.5: scaleY(0.3) translateX(75%), 83 | 1.6: scaleY(1) translateX(75%), 84 | 2: translateX(150%), 85 | 3.3: scaleY(1) translateX(150%), 86 | 3.4: scaleY(0.3) translateX(150%), 87 | 3.5: scaleY(1) translateX(150%), 88 | 3.8: scaleY(1) translateX(150%), 89 | 3.9: scaleY(0.3) translateX(150%), 90 | 4.0: scaleY(1) translateX(150%), 91 | 5: translateX(0) translateY(-170%), 92 | 5.4: scaleY(1) translateY(-170%), 93 | 5.5: scaleY(0.3) translateY(-170%), 94 | 5.6: scaleY(1) translateY(-170%), 95 | 5.7: scaleY(1) translateY(-170%), 96 | 5.8: scaleY(0.3) translateY(-170%), 97 | 5.9: scaleY(1) translateY(-170%), 98 | 8: translateY(0), 99 | 9.8: scaleY(1) translateY(0), 100 | 9.9: scaleY(0.3) translateY(0), 101 | 10.0: scaleY(1) translateY(0), 102 | 10.5: scaleY(1) translateY(0), 103 | 10.6: scaleY(0.3) translateY(0), 104 | 10.7: scaleY(1) translateY(0), 105 | ); 106 | 107 | $k-right-eye: $k-left-eye; 108 | 109 | $k-tongue: ( 110 | 7: translateY(0), 111 | 8: translateY(100%) rotate(10deg), 112 | 11: translateY(100%) rotate(10deg), 113 | 12: translateY(0) 114 | ); 115 | 116 | $k-mouth-cover-left: ( 117 | 6: rotate(0), 118 | 9: rotate(90deg), 119 | 11: rotate(90deg), 120 | 13: rotate(0) 121 | ); 122 | 123 | $k-mouth-cover-right: ( 124 | 6: rotate(0), 125 | 9: rotate(-90deg), 126 | 11: rotate(-90deg), 127 | 13: rotate(0) 128 | ); 129 | 130 | $k-tail: ( 131 | 1: rotate(0), 132 | 1.5: rotate(30deg), 133 | 2: rotate(0), 134 | 3: rotate(0), 135 | 4: rotate(30deg), 136 | 7: rotate(30deg), 137 | 7.25: rotate(0), 138 | ); 139 | $tail-wags: 14; 140 | $tail-interval: (11 - 7.5) / $tail-wags; 141 | @for $i from 1 through $tail-wags { 142 | $k-tail: map-merge($k-tail, ( 143 | (($i - 1) * $tail-interval + 7.5): rotate(28deg), 144 | (($i - 0.5) * $tail-interval + 7.5): rotate(0) 145 | )) !global; 146 | } 147 | 148 | $k-left-ear: ( 149 | 0: rotate(6deg), 150 | 1: rotate(6deg), 151 | 2: rotate(15deg), 152 | 4: rotate(15deg), 153 | 5: rotate(30deg), 154 | 6: rotate(30deg), 155 | 7: rotate(0deg), 156 | 8: rotate(0deg), 157 | 9: rotate(15deg), 158 | 12: rotate(15deg), 159 | 14: rotate(6deg), 160 | $total-kf: rotateZ(6deg) 161 | ); 162 | 163 | $k-right-ear: ( 164 | 0: rotateZ(-16deg), 165 | 1: rotateZ(-16deg), 166 | 2: rotateZ(-19deg), 167 | 4: rotateZ(-19deg), 168 | 5: rotateZ(-30deg), 169 | 170 | 5.5: rotateZ(-19deg), 171 | 5.6: rotateZ(-30deg), 172 | 5.7: rotateZ(-19deg), 173 | 6: rotateZ(-19deg), 174 | 6.1: rotateZ(-30deg), 175 | 6.2: rotateZ(-19deg), 176 | 177 | 7: rotateZ(-9deg), 178 | 8: rotateZ(-9deg), 179 | 180 | 9: rotateZ(-19deg), 181 | 9.1: rotateZ(-30deg), 182 | 9.2: rotateZ(-19deg), 183 | 9.4: rotateZ(-19deg), 184 | 9.5: rotateZ(-30deg), 185 | 9.6: rotateZ(-19deg), 186 | 187 | 12: rotateZ(-19deg), 188 | 14: rotateZ(-16deg), 189 | $total-kf: rotateZ(-16deg) 190 | ); 191 | 192 | @each $i, $prop in $k-right-ear { 193 | $k-right-ear: map-merge($k-right-ear, ( 194 | $i: $prop + ' ' + rotateY(180deg) 195 | )); 196 | } 197 | 198 | @mixin effect($name, $kf) { 199 | @keyframes #{$name} { 200 | @each $interval, $transform in $kf { 201 | #{percentage($interval/$total-kf)} { 202 | transform: $transform; 203 | } 204 | } 205 | } 206 | } 207 | 208 | @include effect('husky-head', $k-head); 209 | @include effect('husky-mouth', $k-mouth); 210 | @include effect('husky-nose', $k-nose); 211 | @include effect('husky-body', $k-body); 212 | @include effect('husky-mane', $k-mane); 213 | @include effect('husky-face', $k-face); 214 | @include effect('husky-left-eye', $k-left-eye); 215 | @include effect('husky-right-eye', $k-right-eye); 216 | @include effect('husky-tongue', $k-tongue); 217 | @include effect('husky-mouth-cover-left', $k-mouth-cover-left); 218 | @include effect('husky-mouth-cover-right', $k-mouth-cover-right); 219 | @include effect('husky-tail', $k-tail); 220 | @include effect('husky-left-ear', $k-left-ear); 221 | @include effect('husky-right-ear', $k-right-ear); 222 | 223 | body { 224 | background-color: husky-color('bg'); 225 | } 226 | 227 | .codrops-header h1 { 228 | animation: squigglevision 0.3s infinite; 229 | animation-timing-function: cubic-bezier(0, 0, 0.80, 0.90); 230 | } 231 | 232 | .codrops-icon--drop:before { 233 | color: #3B6BA5; 234 | } 235 | 236 | .content--husky { 237 | display: flex; 238 | flex-direction: column; 239 | justify-content: flex-end; 240 | align-items: center; 241 | height: 100vh; 242 | position: absolute; 243 | pointer-events: none; 244 | top: 0; 245 | width: 100%; 246 | margin: 0; 247 | padding: 3rem 0; 248 | animation: squigglevision 0.3s infinite; 249 | 250 | *, *:before, *:after { 251 | animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important; 252 | } 253 | 254 | *:before, *:after { 255 | content: ''; 256 | display: block; 257 | position: absolute; 258 | } 259 | 260 | &, &:before, &:after { 261 | background-repeat: no-repeat; 262 | background-size: 395vmin; 263 | background-position: -150vmin calc(100% + 11vmin); 264 | } 265 | 266 | &:before, &:after { 267 | @include svg((height: 78, width: 500, viewBox: (0 0 500 78))) { 268 | @include svg('path', ( 269 | fill: husky-color('snow'), 270 | d: 'M375,27c-37,0-82.5-19-125-19s-88,19-125,19S42.5,8,0,8v70h250h250V8C457.5,8,412,27,375,27z' 271 | )); 272 | @include svg('polygon', ( 273 | fill: rgba(black, 0.5), 274 | points: '256.3,0 254.7,6.5 256.1,6.5 256.1,8.4 256.3,8.4 256.5,8.4 256.5,6.5 258,6.5' 275 | )); 276 | @include svg('polygon', ( 277 | fill: rgba(black, 0.5), 278 | points: '252.8,0 251.2,6.5 252.6,6.5 252.6,8.4 252.8,8.4 253,8.4 253,6.5 254.4,6.5' 279 | )); 280 | @include svg('polygon', ( 281 | fill: rgba(black, 0.5), 282 | points: '21.4,1.3 19.7,7.8 21.2,7.8 21.2,9.7 21.4,9.7 21.6,9.7 21.6,7.8 23,7.8' 283 | )); 284 | } 285 | } 286 | 287 | @include svg((height: 78, width: 500, viewBox: (0 0 500 78))) { 288 | @include svg('path', ( 289 | fill: husky-color('snow'), 290 | d: 'M375,27c-37,0-82.5-19-125-19s-88,19-125,19S42.5,8,0,8v70h250h250V8C457.5,8,412,27,375,27z' 291 | )); 292 | } 293 | 294 | &:before { 295 | background-position: left bottom; 296 | } 297 | 298 | &:after { 299 | background-position: -100vmin bottom; 300 | 301 | @media (max-width: 700px) { 302 | background-position: -115vmin bottom; 303 | } 304 | } 305 | 306 | &:before, &:after { 307 | content: ''; 308 | display: block; 309 | position: absolute; 310 | top: 0; 311 | left: 0; 312 | width: 100%; 313 | height: 100%; 314 | opacity: 0.5; 315 | z-index: -1; 316 | } 317 | } 318 | 319 | .husky { 320 | animation: husky-squiggly-anim 0.3s infinite; 321 | height: 48vmin; 322 | width: 67.2vmin; 323 | 324 | @media screen and (max-width: 400px) { 325 | // Chrome for Android chokes 326 | animation: husky-none; 327 | } 328 | 329 | &:before { 330 | width: 70%; 331 | height: 0.4vmin; 332 | background: husky-color('lighter'); 333 | border-radius: 0.4vmin; 334 | top: 100%; 335 | left: 5%; 336 | z-index: 2; 337 | } 338 | 339 | &:after { 340 | width: 100vw; 341 | left: 50%; 342 | height: 3rem; 343 | top: calc(100% + 0.4vmin); 344 | z-index: 3; 345 | background: husky-color('snow'); 346 | transform: translateX(-50%); 347 | } 348 | } 349 | 350 | .husky-head { 351 | animation: husky-head $duration none infinite; 352 | position: absolute; 353 | height: 45%; 354 | width: 58%; 355 | left: 34%; 356 | top: 5%; 357 | transform-origin: bottom center; 358 | 359 | &:before { 360 | background: husky-color('primary'); 361 | border-top-left-radius: 50% 40%; 362 | border-top-right-radius: 50% 40%; 363 | border-bottom-right-radius: 10% 60%; 364 | height: 100%; 365 | width: 100%; 366 | } 367 | } 368 | 369 | .husky-face { 370 | animation: husky-face $duration none infinite; 371 | position: absolute; 372 | width: 98%; 373 | height: 62%; 374 | top: 15%; 375 | left: 2%; 376 | 377 | &:before { 378 | z-index: 1; 379 | width: 94%; 380 | height: 70%; 381 | left: 3%; 382 | background-color: husky-color('white'); 383 | bottom: 5%; 384 | border-top-left-radius: 40% 50%; 385 | border-top-right-radius: 40% 50%; 386 | border-bottom-left-radius: 30% 50%; 387 | border-bottom-right-radius: 30% 40%; 388 | } 389 | } 390 | 391 | .husky-eye { 392 | animation: husky-eyes $duration none infinite; 393 | position: absolute; 394 | width: 30%; 395 | height: 40%; 396 | background-color: husky-color('white'); 397 | right: 45%; 398 | border-top-left-radius: 55% 50%; 399 | border-top-right-radius: 45% 50%; 400 | z-index: 2; 401 | 402 | &:before { 403 | animation: husky-left-eye $duration none infinite; 404 | height: 15%; 405 | width: 15%; 406 | border-radius: 100%; 407 | background: husky-color('eye'); 408 | top: 45%; 409 | left: 45%; 410 | transform-origin: center center; 411 | } 412 | 413 | + .husky-eye { 414 | z-index: 1; 415 | right: initial; 416 | left: 48%; 417 | border-top-right-radius: 55% 50%; 418 | border-top-left-radius: 45% 50%; 419 | } 420 | } 421 | 422 | .husky-nose { 423 | animation: husky-nose $duration none infinite; 424 | z-index: 2; 425 | position: absolute; 426 | width: 20%; 427 | height: 20%; 428 | top: 29%; 429 | left: 42%; 430 | 431 | &:after { 432 | background: husky-color('primary'); 433 | height: 100%; 434 | width: 100%; 435 | border-top-left-radius: 20% 20%; 436 | border-top-right-radius: 30% 20%; 437 | border-bottom-right-radius: 55% 80%; 438 | border-bottom-left-radius: 50% 80%; 439 | } 440 | 441 | &:before { 442 | height: 100%; 443 | width: 200%; 444 | background: husky-color('white'); 445 | top: 50%; 446 | left: -50%; 447 | z-index: -1; 448 | border-radius: 50%; 449 | } 450 | } 451 | 452 | .husky-ear { 453 | animation: husky-left-ear $duration both infinite; 454 | position: absolute; 455 | top: 3%; 456 | left: -10%; 457 | width: 48%; 458 | height: 30%; 459 | border-bottom-left-radius: 100% 90%; 460 | border-top-left-radius: 10%; 461 | transform-origin: 80% center; 462 | overflow: hidden; 463 | background: husky-color('primary'); 464 | 465 | &:before { 466 | width: 70%; 467 | height: 55%; 468 | border: 2px solid husky-color('primary'); 469 | background: husky-color('ear'); 470 | top: 20%; 471 | left: 15%; 472 | transform-origin: top left; 473 | transform: 474 | skewX(30deg) 475 | rotate(-5deg); 476 | } 477 | 478 | &:after { 479 | width: 70%; 480 | height: 100%; 481 | border-top-left-radius: 100%; 482 | background: husky-color('primary'); 483 | left: 32%; 484 | transform-origin: top left; 485 | transform: rotate(-5deg); 486 | } 487 | 488 | + .husky-ear { 489 | animation: husky-right-ear $duration both infinite; 490 | background-color: husky-color('dark'); 491 | left: 15%; 492 | top: 5%; 493 | z-index: -1; 494 | transform-origin: right center; 495 | 496 | &:before { 497 | border-color: husky-color('dark'); 498 | } 499 | 500 | &:after { 501 | background: husky-color('dark'); 502 | } 503 | } 504 | } 505 | 506 | .husky-mouth { 507 | z-index: 1; 508 | animation: husky-mouth $duration none infinite; 509 | position: absolute; 510 | width: 48%; 511 | height: 55%; 512 | bottom: -5%; 513 | left: 28%; 514 | overflow: hidden; 515 | 516 | &:before, &:after { 517 | animation: husky-mouth-cover-left $duration none infinite; 518 | width: 28%; 519 | height: 100%; 520 | background: husky-color('white'); 521 | top: -50%; 522 | left: 0; 523 | z-index: 3; 524 | transform-origin: right top; 525 | } 526 | 527 | &:after { 528 | animation: husky-mouth-cover-right $duration none infinite; 529 | left: initial; 530 | right: 0; 531 | transform-origin: left top; 532 | } 533 | } 534 | 535 | .husky-lips { 536 | z-index: 2; 537 | height: 35%; 538 | width: 100%; 539 | 540 | &:before, &:after { 541 | background: husky-color('white'); 542 | width: calc(50% + 1.5px); 543 | border-color: husky-color('light'); 544 | border-width: 0.3vmin; 545 | border-style: solid; 546 | height: 100%; 547 | border-bottom-left-radius: 65% 100%; 548 | border-bottom-right-radius: 35% 50%; 549 | border-top-right-radius: 50%; 550 | border-right-color: transparent; 551 | border-top-color: transparent; 552 | } 553 | 554 | 555 | &:after { 556 | transform: rotateY(180deg); 557 | left: initial; 558 | right: 0; 559 | } 560 | } 561 | 562 | // Firefox hack 563 | @supports (-moz-appearance:none) and (display:contents) { 564 | .husky-lips { 565 | &:before, &:after { 566 | width: calc(50% + 4px); 567 | } 568 | } 569 | } 570 | 571 | .husky-tongue { 572 | animation: husky-tongue $duration none infinite; 573 | position: absolute; 574 | height: 100%; 575 | width: 44%; 576 | background: husky-color('tongue'); 577 | left: 25%; 578 | bottom: 100%; 579 | z-index: 1; 580 | border-bottom-left-radius: 50% 20%; 581 | border-bottom-right-radius: 50% 20%; 582 | } 583 | 584 | .husky-body { 585 | animation: husky-body $duration none infinite; 586 | width: 45%; 587 | height: 100%; 588 | position: absolute; 589 | left: 25%; 590 | } 591 | 592 | .husky-torso { 593 | position: absolute; 594 | height: 55%; 595 | width: 100%; 596 | bottom: 0; 597 | 598 | &:before { 599 | background: husky-color('primary'); 600 | height: 100%; 601 | width: 50%; 602 | transform: 603 | translateX(-20%) 604 | skewX(-30deg); 605 | transform-origin: left bottom; 606 | border-radius: 0 30% 0 60%; 607 | } 608 | 609 | &:after { 610 | background: husky-color('primary'); 611 | height: 100%; 612 | width: 60%; 613 | top: 0; 614 | right: 0; 615 | border-radius: 10% 40% 60% 0; 616 | } 617 | } 618 | 619 | .husky-mane { 620 | animation: husky-mane $duration none infinite; 621 | z-index: 2; 622 | position: absolute; 623 | width: 31.5%; 624 | height: 30%; 625 | top: 44%; 626 | left: 37%; 627 | 628 | &:before { 629 | background: husky-color('white'); 630 | height: 40%; 631 | width: 100%; 632 | border-top-left-radius: 10% 50%; 633 | border-top-right-radius: 20% 100%; 634 | border-bottom-left-radius: 10% 50%; 635 | } 636 | 637 | &:after { 638 | background: husky-color('white'); 639 | top: 25%; 640 | height: 76%; 641 | width: 30%; 642 | right: 23%; 643 | border-top-right-radius: 100% 80%; 644 | transform: rotate(47deg); 645 | transform-origin: bottom right; 646 | } 647 | } 648 | 649 | .husky-coat { 650 | position: absolute; 651 | width: 50%; 652 | height: 50%; 653 | background: husky-color('white'); 654 | transform-origin: bottom right; 655 | left: 10%; 656 | top: 21%; 657 | transform: rotate(25deg) skewX(-30deg) ; 658 | } 659 | 660 | .husky-legs { 661 | background-color: husky-color('primary'); 662 | position: absolute; 663 | height: 30%; 664 | width: 42%; 665 | left: 23%; 666 | bottom: 0; 667 | border-top-left-radius: 20% 37%; 668 | border-bottom-left-radius: 10% 37%; 669 | border-top-right-radius: 50%; 670 | z-index: 1; 671 | } 672 | 673 | .husky-front-legs { 674 | position: absolute; 675 | width: 55%; 676 | height: 120%; 677 | bottom: 0; 678 | right: -12%; 679 | 680 | &:before { 681 | width: 4%; 682 | height: 6%; 683 | background: transparent; 684 | bottom: 0; 685 | left: 47%; 686 | box-shadow: 687 | -1.3vmin 0 0 husky-color('light'), 688 | -2.8vmin 0 0 husky-color('light'), 689 | 1.3vmin 0 0 husky-color('primary'), 690 | 2.8vmin 0 0 husky-color('primary') 691 | ; 692 | z-index: 2; 693 | } 694 | 695 | > .husky-leg { 696 | width: 51%; 697 | height: 100%; 698 | position: absolute; 699 | bottom: -1px; 700 | right: 50%; 701 | overflow: hidden; 702 | 703 | &:before { 704 | background: husky-color('lighter'); 705 | height: 100%; 706 | width: 100%; 707 | transform: skewY(-30deg) skewX(10deg); 708 | transform-origin: top right; 709 | } 710 | 711 | + .husky-leg { 712 | right: 0; 713 | transform: rotateY(180deg); 714 | 715 | &:before { 716 | background: husky-color('light'); 717 | } 718 | } 719 | } 720 | } 721 | 722 | .husky-hind-leg { 723 | position: absolute; 724 | background: husky-color('light'); 725 | width: 35%; 726 | height: 25%; 727 | border-top-left-radius: 35% 100%; 728 | border-top-right-radius: 40% 100%; 729 | bottom: 0%; 730 | right: 45%; 731 | 732 | &:before { 733 | width: 6%; 734 | height: 20%; 735 | background: transparent; 736 | bottom: 0; 737 | left: 70%; 738 | box-shadow: 739 | -0.8vmin 0 0 husky-color('primary'), 740 | 0.8vmin 0 0 husky-color('primary'); 741 | } 742 | } 743 | 744 | .husky-tail { 745 | position: absolute; 746 | width: 15%; 747 | height: 6%; 748 | bottom: 0; 749 | right: 72%; 750 | background: husky-color('dark'); 751 | z-index: 0; 752 | 753 | > .husky-tail { 754 | animation: husky-tail $duration none infinite; 755 | height: 100%; 756 | width: 3.2vmin; 757 | right: 26%; 758 | transform-origin: center right; 759 | border-top-left-radius: 50% 50%; 760 | border-bottom-left-radius: 50% 50%; 761 | transform: rotate(26deg); 762 | transform: rotate(0deg); 763 | } 764 | 765 | .husky > & { 766 | border-top-left-radius: 10% 50%; 767 | border-bottom-left-radius: 10% 50%; 768 | } 769 | 770 | .husky > & > & { 771 | right: 88%; 772 | } 773 | } 774 | 775 | .snow { 776 | $snow-color: rgba(white, 0.8); 777 | $num-snowflakes: 40; 778 | position: absolute; 779 | top: 0; 780 | left: 0; 781 | width: 100%; 782 | height: 100%; 783 | z-index: 5; 784 | pointer-events: none; 785 | 786 | &:before, &:after { 787 | content: ''; 788 | display: block; 789 | position: absolute; 790 | top: 0; 791 | left: 0; 792 | z-index: 10; 793 | width: 1vmin; 794 | height: 1vmin; 795 | background-color: $snow-color; 796 | border-radius: 50%; 797 | animation: snow 5s linear infinite; 798 | 799 | $snowflakes: (); 800 | 801 | @for $i from 1 through $num-snowflakes { 802 | $top: random() * 100vh * 3; 803 | $left: random() * 100vw; 804 | 805 | $snowflakes: append($snowflakes, 806 | #{$left $top $snow-color}, 807 | comma 808 | ); 809 | 810 | $snowflakes: append($snowflakes, 811 | #{$left $top + 100vh * 3 $snow-color}, 812 | comma 813 | ); 814 | } 815 | 816 | box-shadow: $snowflakes; 817 | } 818 | 819 | &:after { 820 | width: 1.1vmin; 821 | height: 8px; 822 | animation-duration: 6s; 823 | } 824 | } 825 | 826 | @keyframes snow { 827 | from { 828 | transform: rotate(10deg) 829 | translateY(-300vh); 830 | } 831 | to { 832 | transform: rotate(10deg) 833 | translateY(0); 834 | } 835 | } 836 | 837 | @keyframes squigglevision { 838 | 0% { 839 | -webkit-filter: url('#squiggly-0'); 840 | filter: url('#squiggly-0'); 841 | } 842 | 25% { 843 | -webkit-filter: url('#squiggly-1'); 844 | filter: url('#squiggly-1'); 845 | } 846 | 50% { 847 | -webkit-filter: url('#squiggly-2'); 848 | filter: url('#squiggly-2'); 849 | } 850 | 75% { 851 | -webkit-filter: url('#squiggly-3'); 852 | filter: url('#squiggly-3'); 853 | } 854 | 100% { 855 | -webkit-filter: url('#squiggly-4'); 856 | filter: url('#squiggly-4'); 857 | } 858 | } 859 | 860 | *, *:before, *:after { 861 | box-sizing: border-box; 862 | position: relative; 863 | } 864 | --------------------------------------------------------------------------------