| /* Copyright (c) 2015, the Dart project authors. Please see the AUTHORS file |
| * for details. All rights reserved. Use of this source code is governed by a |
| * BSD-style license that can be found in the LICENSE file. */ |
| |
| /* Compiled output from |
| * http://codepen.io/mknadler/pen/11b75cb014a3c382f54abf527655af21. */ |
| |
| iframe { |
| display: none; |
| } |
| |
| svg { |
| position: absolute; |
| margin: auto; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| top: 0; |
| } |
| |
| #right-flank { |
| fill: #0074C1; |
| stroke-color: #0074C1; |
| -webkit-animation: right-flank 8s ease infinite alternate; |
| animation: right-flank 8s ease infinite alternate; |
| } |
| |
| #right-ear { |
| fill: #00B5AB; |
| stroke-color: #00B5AB; |
| -webkit-animation: right-ear 8s ease-in infinite alternate; |
| animation: right-ear 8s ease-in infinite alternate; |
| } |
| |
| #right-paw { |
| fill: #00A6E4; |
| stroke-color: #00A6E4; |
| -webkit-animation: right-paw 8s ease-out infinite alternate; |
| animation: right-paw 8s ease-out infinite alternate; |
| } |
| |
| #left-flank { |
| fill: #00B5AB; |
| stroke-color: #00B5AB; |
| -webkit-animation: left-flank 8s ease-in-out infinite alternate; |
| animation: left-flank 8s ease-in-out infinite alternate; |
| } |
| |
| #left-ear { |
| fill: #0074C1; |
| stroke-color: #0074C1; |
| -webkit-animation: left-ear 8s linear infinite alternate; |
| animation: left-ear 8s linear infinite alternate; |
| } |
| |
| #left-paw { |
| fill: #41C1BC; |
| stroke-color: #41C1BC; |
| -webkit-animation: left-paw 8s ease infinite alternate; |
| animation: left-paw 8s ease infinite alternate; |
| } |
| |
| @-webkit-keyframes left-ear { |
| 20% { |
| -webkit-transform: translate(250px, 150px) rotateY(180deg) scale(0.6); |
| transform: translate(250px, 150px) rotateY(180deg) scale(0.6); |
| fill: #00A6E4; |
| } |
| 50% { |
| -webkit-transform: translate(100px, 75px) rotateY(80deg) scale(1.1); |
| transform: translate(100px, 75px) rotateY(80deg) scale(1.1); |
| fill: #41C1BC; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #0074C1; |
| } |
| } |
| |
| @keyframes left-ear { |
| 20% { |
| -webkit-transform: translate(250px, 150px) rotateY(180deg) scale(0.6); |
| transform: translate(250px, 150px) rotateY(180deg) scale(0.6); |
| fill: #00A6E4; |
| } |
| 50% { |
| -webkit-transform: translate(100px, 75px) rotateY(80deg) scale(1.1); |
| transform: translate(100px, 75px) rotateY(80deg) scale(1.1); |
| fill: #41C1BC; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #0074C1; |
| } |
| } |
| @-webkit-keyframes right-ear { |
| 20% { |
| -webkit-transform: translate(200px, 250px) rotateX(180deg) scale(0.6); |
| transform: translate(200px, 250px) rotateX(180deg) scale(0.6); |
| fill: #41C1BC; |
| } |
| 50% { |
| -webkit-transform: translate(75px, 100px) rotateX(80deg) scale(1.1); |
| transform: translate(75px, 100px) rotateX(80deg) scale(1.1); |
| fill: #00A6E4; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #00B5AB; |
| } |
| } |
| @keyframes right-ear { |
| 20% { |
| -webkit-transform: translate(200px, 250px) rotateX(180deg) scale(0.6); |
| transform: translate(200px, 250px) rotateX(180deg) scale(0.6); |
| fill: #41C1BC; |
| } |
| 50% { |
| -webkit-transform: translate(75px, 100px) rotateX(80deg) scale(1.1); |
| transform: translate(75px, 100px) rotateX(80deg) scale(1.1); |
| fill: #00A6E4; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #00B5AB; |
| } |
| } |
| @-webkit-keyframes left-paw { |
| 20% { |
| -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6); |
| transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6); |
| fill: #00B5AB; |
| } |
| 50% { |
| -webkit-transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6); |
| transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6); |
| fill: #00B5AB; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #41C1BC; |
| } |
| } |
| @keyframes left-paw { |
| 20% { |
| -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6); |
| transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6); |
| fill: #00B5AB; |
| } |
| 50% { |
| -webkit-transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6); |
| transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6); |
| fill: #00B5AB; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #41C1BC; |
| } |
| } |
| @-webkit-keyframes right-paw { |
| 20% { |
| -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6); |
| transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6); |
| fill: #41C1BC; |
| } |
| 50% { |
| -webkit-transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6); |
| transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6); |
| fill: #41C1BC; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #00A6E4; |
| } |
| } |
| @keyframes right-paw { |
| 20% { |
| -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6); |
| transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6); |
| fill: #41C1BC; |
| } |
| 50% { |
| -webkit-transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6); |
| transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6); |
| fill: #41C1BC; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #00A6E4; |
| } |
| } |
| @-webkit-keyframes left-flank { |
| 20% { |
| -webkit-transform: translate(0px, 100px) scale(0.6); |
| transform: translate(0px, 100px) scale(0.6); |
| fill: #00A6E4; |
| } |
| 50% { |
| -webkit-transform: translate(0px, 100px) scale(0.4); |
| transform: translate(0px, 100px) scale(0.4); |
| fill: #00A6E4; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #00B5AB; |
| } |
| } |
| @keyframes left-flank { |
| 20% { |
| -webkit-transform: translate(0px, 100px) scale(0.6); |
| transform: translate(0px, 100px) scale(0.6); |
| fill: #00A6E4; |
| } |
| 50% { |
| -webkit-transform: translate(0px, 100px) scale(0.4); |
| transform: translate(0px, 100px) scale(0.4); |
| fill: #00A6E4; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #00B5AB; |
| } |
| } |
| @-webkit-keyframes right-flank { |
| 20% { |
| -webkit-transform: translate(100px, -25px) scale(0.6); |
| transform: translate(100px, -25px) scale(0.6); |
| fill: #41C1BC; |
| } |
| 50% { |
| -webkit-transform: translate(110px, 0px) scale(0.4); |
| transform: translate(110px, 0px) scale(0.4); |
| fill: #00A6E4; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #0074C1; |
| } |
| } |
| @keyframes right-flank { |
| 20% { |
| -webkit-transform: translate(100px, -25px) scale(0.6); |
| transform: translate(100px, -25px) scale(0.6); |
| fill: #41C1BC; |
| } |
| 50% { |
| -webkit-transform: translate(110px, 0px) scale(0.4); |
| transform: translate(110px, 0px) scale(0.4); |
| fill: #00A6E4; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #0074C1; |
| } |
| } |