Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(518)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: lib/src/runner/browser/static/host.css

Issue 1087403002: Add an animation to the host page. (Closed) Base URL: git@github.com:dart-lang/test@master
Patch Set: Reformat SVG Created 5 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « CHANGELOG.md ('k') | lib/src/runner/browser/static/index.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 /* Copyright (c) 2015, the Dart project authors. Please see the AUTHORS file
2 * for details. All rights reserved. Use of this source code is governed by a
3 * BSD-style license that can be found in the LICENSE file. */
4
5 /* Compiled output from
6 * http://codepen.io/mknadler/pen/11b75cb014a3c382f54abf527655af21. */
7
8 iframe {
9 display: none;
10 }
11
12 svg {
13 position: absolute;
14 margin: auto;
15 left: 0;
16 right: 0;
17 bottom: 0;
18 top: 0;
19 }
20
21 #right-flank {
22 fill: #0074C1;
23 stroke-color: #0074C1;
24 -webkit-animation: right-flank 8s ease infinite alternate;
25 animation: right-flank 8s ease infinite alternate;
26 }
27
28 #right-ear {
29 fill: #00B5AB;
30 stroke-color: #00B5AB;
31 -webkit-animation: right-ear 8s ease-in infinite alternate;
32 animation: right-ear 8s ease-in infinite alternate;
33 }
34
35 #right-paw {
36 fill: #00A6E4;
37 stroke-color: #00A6E4;
38 -webkit-animation: right-paw 8s ease-out infinite alternate;
39 animation: right-paw 8s ease-out infinite alternate;
40 }
41
42 #left-flank {
43 fill: #00B5AB;
44 stroke-color: #00B5AB;
45 -webkit-animation: left-flank 8s ease-in-out infinite alternate;
46 animation: left-flank 8s ease-in-out infinite alternate;
47 }
48
49 #left-ear {
50 fill: #0074C1;
51 stroke-color: #0074C1;
52 -webkit-animation: left-ear 8s linear infinite alternate;
53 animation: left-ear 8s linear infinite alternate;
54 }
55
56 #left-paw {
57 fill: #41C1BC;
58 stroke-color: #41C1BC;
59 -webkit-animation: left-paw 8s ease infinite alternate;
60 animation: left-paw 8s ease infinite alternate;
61 }
62
63 @-webkit-keyframes left-ear {
64 20% {
65 -webkit-transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
66 transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
67 fill: #00A6E4;
68 }
69 50% {
70 -webkit-transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
71 transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
72 fill: #41C1BC;
73 }
74 80% {
75 -webkit-transform: translate(0px, 0px) scale(1);
76 transform: translate(0px, 0px) scale(1);
77 fill: #0074C1;
78 }
79 }
80
81 @keyframes left-ear {
82 20% {
83 -webkit-transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
84 transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
85 fill: #00A6E4;
86 }
87 50% {
88 -webkit-transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
89 transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
90 fill: #41C1BC;
91 }
92 80% {
93 -webkit-transform: translate(0px, 0px) scale(1);
94 transform: translate(0px, 0px) scale(1);
95 fill: #0074C1;
96 }
97 }
98 @-webkit-keyframes right-ear {
99 20% {
100 -webkit-transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
101 transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
102 fill: #41C1BC;
103 }
104 50% {
105 -webkit-transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
106 transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
107 fill: #00A6E4;
108 }
109 80% {
110 -webkit-transform: translate(0px, 0px) scale(1);
111 transform: translate(0px, 0px) scale(1);
112 fill: #00B5AB;
113 }
114 }
115 @keyframes right-ear {
116 20% {
117 -webkit-transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
118 transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
119 fill: #41C1BC;
120 }
121 50% {
122 -webkit-transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
123 transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
124 fill: #00A6E4;
125 }
126 80% {
127 -webkit-transform: translate(0px, 0px) scale(1);
128 transform: translate(0px, 0px) scale(1);
129 fill: #00B5AB;
130 }
131 }
132 @-webkit-keyframes left-paw {
133 20% {
134 -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale (0.6);
135 transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale (0.6);
136 fill: #00B5AB;
137 }
138 50% {
139 -webkit-transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale (0.6);
140 transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale (0.6);
141 fill: #00B5AB;
142 }
143 80% {
144 -webkit-transform: translate(0px, 0px) scale(1);
145 transform: translate(0px, 0px) scale(1);
146 fill: #41C1BC;
147 }
148 }
149 @keyframes left-paw {
150 20% {
151 -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale (0.6);
152 transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale (0.6);
153 fill: #00B5AB;
154 }
155 50% {
156 -webkit-transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale (0.6);
157 transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale (0.6);
158 fill: #00B5AB;
159 }
160 80% {
161 -webkit-transform: translate(0px, 0px) scale(1);
162 transform: translate(0px, 0px) scale(1);
163 fill: #41C1BC;
164 }
165 }
166 @-webkit-keyframes right-paw {
167 20% {
168 -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scal e(0.6);
169 transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scal e(0.6);
170 fill: #41C1BC;
171 }
172 50% {
173 -webkit-transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scal e(0.6);
174 transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scal e(0.6);
175 fill: #41C1BC;
176 }
177 80% {
178 -webkit-transform: translate(0px, 0px) scale(1);
179 transform: translate(0px, 0px) scale(1);
180 fill: #00A6E4;
181 }
182 }
183 @keyframes right-paw {
184 20% {
185 -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scal e(0.6);
186 transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scal e(0.6);
187 fill: #41C1BC;
188 }
189 50% {
190 -webkit-transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scal e(0.6);
191 transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scal e(0.6);
192 fill: #41C1BC;
193 }
194 80% {
195 -webkit-transform: translate(0px, 0px) scale(1);
196 transform: translate(0px, 0px) scale(1);
197 fill: #00A6E4;
198 }
199 }
200 @-webkit-keyframes left-flank {
201 20% {
202 -webkit-transform: translate(0px, 100px) scale(0.6);
203 transform: translate(0px, 100px) scale(0.6);
204 fill: #00A6E4;
205 }
206 50% {
207 -webkit-transform: translate(0px, 100px) scale(0.4);
208 transform: translate(0px, 100px) scale(0.4);
209 fill: #00A6E4;
210 }
211 80% {
212 -webkit-transform: translate(0px, 0px) scale(1);
213 transform: translate(0px, 0px) scale(1);
214 fill: #00B5AB;
215 }
216 }
217 @keyframes left-flank {
218 20% {
219 -webkit-transform: translate(0px, 100px) scale(0.6);
220 transform: translate(0px, 100px) scale(0.6);
221 fill: #00A6E4;
222 }
223 50% {
224 -webkit-transform: translate(0px, 100px) scale(0.4);
225 transform: translate(0px, 100px) scale(0.4);
226 fill: #00A6E4;
227 }
228 80% {
229 -webkit-transform: translate(0px, 0px) scale(1);
230 transform: translate(0px, 0px) scale(1);
231 fill: #00B5AB;
232 }
233 }
234 @-webkit-keyframes right-flank {
235 20% {
236 -webkit-transform: translate(100px, -25px) scale(0.6);
237 transform: translate(100px, -25px) scale(0.6);
238 fill: #41C1BC;
239 }
240 50% {
241 -webkit-transform: translate(110px, 0px) scale(0.4);
242 transform: translate(110px, 0px) scale(0.4);
243 fill: #00A6E4;
244 }
245 80% {
246 -webkit-transform: translate(0px, 0px) scale(1);
247 transform: translate(0px, 0px) scale(1);
248 fill: #0074C1;
249 }
250 }
251 @keyframes right-flank {
252 20% {
253 -webkit-transform: translate(100px, -25px) scale(0.6);
254 transform: translate(100px, -25px) scale(0.6);
255 fill: #41C1BC;
256 }
257 50% {
258 -webkit-transform: translate(110px, 0px) scale(0.4);
259 transform: translate(110px, 0px) scale(0.4);
260 fill: #00A6E4;
261 }
262 80% {
263 -webkit-transform: translate(0px, 0px) scale(1);
264 transform: translate(0px, 0px) scale(1);
265 fill: #0074C1;
266 }
267 }
OLDNEW
« no previous file with comments | « CHANGELOG.md ('k') | lib/src/runner/browser/static/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698