mirror of https://github.com/flutter/samples.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
317 lines
8.4 KiB
317 lines
8.4 KiB
/* 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. */
|
|
|
|
iframe {
|
|
/* We would use display: none here, but then Firefox fails to properly compute
|
|
* styles. See #274 */
|
|
visibility: hidden;
|
|
width: 1024px;
|
|
height: 768px;
|
|
}
|
|
|
|
#play {
|
|
display: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#dark {
|
|
display: none;
|
|
}
|
|
|
|
.paused #play {
|
|
display: block;
|
|
z-index: 1;
|
|
}
|
|
|
|
.paused #dark {
|
|
display: block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.paused #right-flank, .paused #right-ear, .paused #right-paw,
|
|
.paused #left-flank, .paused #left-ear, .paused #left-paw {
|
|
-webkit-animation-play-state: paused;
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
.debug body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.debug iframe {
|
|
visibility: visible;
|
|
border: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Compiled output from
|
|
* http://codepen.io/mknadler/pen/11b75cb014a3c382f54abf527655af21. */
|
|
|
|
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;
|
|
}
|
|
}
|