github/this-is-responsive
1
1
Fork 0
mirror of https://github.com/bradfrost/this-is-responsive.git synced 2026-01-14 16:47:57 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
425c62f555f3877ef3ee61894de2461d578fa2ac
this-is-responsive/animation.css
Brad Frost 93953fb940 Homepage animation loop fix
2012-09-10 14:38:47 -04:00

277 lines
10 KiB
CSS
Raw Blame History

.ani div.a1 b {
-webkit-animation: box-resize 10s infinite alternate both;
-moz-animation: box-resize 10s infinite alternate both;
-ms-animation: box-resize 10s infinite alternate both;
-o-animation: box-resize 10s infinite alternate both;
}
.ani div.a2 b {
-webkit-animation: box-resize2 10s infinite alternate both;
-moz-animation: box-resize2 10s infinite alternate both;
-ms-animation: box-resize2 10s infinite alternate both;
-o-animation: box-resize2 10s infinite alternate both;
}
.ani div.a3 b {
-webkit-animation: box-resize3 10s infinite alternate both;
-moz-animation: box-resize3 10s infinite alternate both;
-ms-animation: box-resize3 10s infinite alternate both;
-o-animation: box-resize3 10s infinite alternate both;
}
.ani div.a4 b {
-webkit-animation: box-resize4 10s infinite alternate both;
-moz-animation: box-resize4 10s infinite alternate both;
-ms-animation: box-resize4 10s infinite alternate both;
-o-animation: box-resize4 10s infinite alternate both;
}
.ani div.a5 b {
-webkit-animation: box-resize5 10s infinite alternate both;
-moz-animation: box-resize5 10s infinite alternate both;
-ms-animation: box-resize5 10s infinite alternate both;
-o-animation: box-resize5 10s infinite alternate both;
}
.ani div.a6 b {
-webkit-animation: box-resize6 10s infinite alternate both;
-moz-animation: box-resize6 10s infinite alternate both;
-ms-animation: box-resize6 10s infinite alternate both;
-o-animation: box-resize6 10s infinite alternate both;
}
.ani div.a7 b {
-webkit-animation: box-resize7 10s infinite alternate both;
-moz-animation: box-resize7 10s infinite alternate both;
-ms-animation: box-resize7 10s infinite alternate both;
-o-animation: box-resize7 10s infinite alternate both;
}
.ani div.a8 b {
-webkit-animation: box-resize8 10s infinite alternate both;
-moz-animation: box-resize8 10s infinite alternate both;
-ms-animation: box-resize8 10s infinite alternate both;
-o-animation: box-resize8 10s infinite alternate both;
}
.ani div.a9 b {
-webkit-animation: box-resize9 10s infinite alternate both;
-moz-animation: box-resize9 10s infinite alternate both;
-ms-animation: box-resize9 10s infinite alternate both;
-o-animation: box-resize9 10s infinite alternate both;
}
.ani div.a10 b {
-webkit-animation: box-resize10 10s infinite alternate both;
-moz-animation: box-resize10 10s infinite alternate both;
-ms-animation: box-resize10 10s infinite alternate both;
-o-animation: box-resize10 10s infinite alternate both;
}
/*Fluid Animation*/
@-webkit-keyframes box-resize {
0% { top: 5%; right: 5%; bottom: 5%; left: 5%; }
50% { top: 1%; right: 15.5; bottom: 1%; left: 15.5%; }
100% { top: 1%; right: 6.4%; bottom: 1%; left: 6Î.4%; }
}
@-moz-keyframes box-resize {
0% { top: 5%; right: 5%; bottom: 5%; left: 5%; }
50% { top: 1%; right: 15.5; bottom: 1%; left: 15.5%; }
100% { top: 1%; right: 6.4%; bottom: 1%; left: 6Î.4%; }
}
@-ms-keyframes box-resize {
0% { top: 5%; right: 5%; bottom: 5%; left: 5%; }
50% { top: 1%; right: 15.5; bottom: 1%; left: 15.5%; }
100% { top: 1%; right: 6.4%; bottom: 1%; left: 6Î.4%; }
}
@-o-keyframes box-resize {
0% { top: 5%; right: 5%; bottom: 5%; left: 5%; }
50% { top: 1%; right: 15.5; bottom: 1%; left: 15.5%; }
100% { top: 1%; right: 6.4%; bottom: 1%; left: 6Î.4%; }
}
@-webkit-keyframes box-resize2 {
0% { top: 20%; right: 20%; bottom: 20%; left: 20%; }
50% { top: 3%; right: 4%; bottom: 3%; left: 4%; }
100% { top: 12%; right: 27%; bottom: 12%; left: 27%; }
}
@-moz-keyframes box-resize2 {
0% { top: 20%; right: 20%; bottom: 20%; left: 20%; }
50% { top: 3%; right: 4%; bottom: 3%; left: 4%; }
100% { top: 12%; right: 27%; bottom: 12%; left: 27%; }
}
@-ms-keyframes box-resize2 {
0% { top: 20%; right: 20%; bottom: 20%; left: 20%; }
50% { top: 3%; right: 4%; bottom: 3%; left: 4%; }
100% { top: 12%; right: 27%; bottom: 12%; left: 27%; }
}
@-o-keyframes box-resize2 {
0% { top: 20%; right: 20%; bottom: 20%; left: 20%; }
50% { top: 3%; right: 4%; bottom: 3%; left: 4%; }
100% { top: 12%; right: 27%; bottom: 12%; left: 27%; }
}
@-webkit-keyframes box-resize3 {
0% { top: 0; right: 0; bottom: 0; left: 0; }
50% { top: 6%; right: 18%; bottom: 6%; left: 18%; }
100% { top: 2%; right: 22%; bottom: 2%; left: 22%; }
}
@-moz-keyframes box-resize3 {
0% { top: 0; right: 0; bottom: 0; left: 0; }
50% { top: 6%; right: 18%; bottom: 6%; left: 18%; }
100% { top: 2%; right: 22%; bottom: 2%; left: 22%; }
}
@-ms-keyframes box-resize3 {
0% { top: 0; right: 0; bottom: 0; left: 0; }
50% { top: 6%; right: 18%; bottom: 6%; left: 18%; }
100% { top: 2%; right: 22%; bottom: 2%; left: 22%; }
}
@-o-keyframes box-resize3 {
0% { top: 0; right: 0; bottom: 0; left: 0; }
50% { top: 6%; right: 18%; bottom: 6%; left: 18%; }
100% { top: 2%; right: 22%; bottom: 2%; left: 22%; }
}
@-webkit-keyframes box-resize4 {
0% { top: 31%; right: 35%; bottom: 31%; left: 35%; }
50% { top: 19.2%; right: 29.333%; bottom: 19.2%; left: 29.333%; }
100% { top: 14.7%; right: 13%; bottom: 14.7%; left: 13%; }
}
@-moz-keyframes box-resize4 {
0% { top: 31%; right: 35%; bottom: 31%; left: 35%; }
50% { top: 19.2%; right: 29.333%; bottom: 19.2%; left: 29.333%; }
100% { top: 14.7%; right: 13%; bottom: 14.7%; left: 13%; }
}
@-ms-keyframes box-resize4 {
0% { top: 31%; right: 35%; bottom: 31%; left: 35%; }
50% { top: 19.2%; right: 29.333%; bottom: 19.2%; left: 29.333%; }
100% { top: 14.7%; right: 13%; bottom: 14.7%; left: 13%; }
}
@-o-keyframes box-resize4 {
0% { top: 31%; right: 35%; bottom: 31%; left: 35%; }
50% { top: 19.2%; right: 29.333%; bottom: 19.2%; left: 29.333%; }
100% { top: 14.7%; right: 13%; bottom: 14.7%; left: 13%; }
}
@-webkit-keyframes box-resize5 {
0% { top: 24%; right: 24%; bottom: 24%; left: 24%; }
50% { top: 10%; right: 8%; bottom: 10%; left: 8%; }
100% { top: 3%; right: 18.8%; bottom: 3%; left: 18.8%; }
}
@-moz-keyframes box-resize5 {
0% { top: 24%; right: 24%; bottom: 24%; left: 24%; }
50% { top: 10%; right: 8%; bottom: 10%; left: 8%; }
100% { top: 3%; right: 18.8%; bottom: 3%; left: 18.8%; }
}
@-ms-keyframes box-resize5 {
0% { top: 24%; right: 24%; bottom: 24%; left: 24%; }
50% { top: 10%; right: 8%; bottom: 10%; left: 8%; }
100% { top: 3%; right: 18.8%; bottom: 3%; left: 18.8%; }
}
@-o-keyframes box-resize5 {
0% { top: 24%; right: 24%; bottom: 24%; left: 24%; }
50% { top: 10%; right: 8%; bottom: 10%; left: 8%; }
100% { top: 3%; right: 18.8%; bottom: 3%; left: 18.8%; }
}
@-webkit-keyframes box-resize6 {
0% { top: 5%; right: 25%; bottom: 5%; left: 25%; }
50% { top: 2%; right: 35%; bottom: 2%; left: 35%; }
100% { top: 4%; right: 33%; bottom: 4%; left: 33%; }
}
@-moz-keyframes box-resize6 {
0% { top: 5%; right: 25%; bottom: 5%; left: 25%; }
50% { top: 2%; right: 35%; bottom: 2%; left: 35%; }
100% { top: 4%; right: 33%; bottom: 4%; left: 33%; }
}
@-ms-keyframes box-resize6 {
0% { top: 5%; right: 25%; bottom: 5%; left: 25%; }
50% { top: 2%; right: 35%; bottom: 2%; left: 35%; }
100% { top: 4%; right: 33%; bottom: 4%; left: 33%; }
}
@-o-keyframes box-resize6 {
0% { top: 5%; right: 25%; bottom: 5%; left: 25%; }
50% { top: 2%; right: 35%; bottom: 2%; left: 35%; }
100% { top: 4%; right: 33%; bottom: 4%; left: 33%; }
}
@-webkit-keyframes box-resize7 {
0% { top: 23%; right: 23%; bottom: 23%; left: 23%; }
50% { top: 13%; right: 21%; bottom: 13%; left: 21%; }
100% { top: 8%; right: 40%; bottom: 8%; left: 40%; }
}
@-moz-keyframes box-resize7 {
0% { top: 23%; right: 23%; bottom: 23%; left: 23%; }
50% { top: 13%; right: 21%; bottom: 13%; left: 21%; }
100% { top: 8%; right: 40%; bottom: 8%; left: 40%; }
}
@-ms-keyframes box-resize7 {
0% { top: 23%; right: 23%; bottom: 23%; left: 23%; }
50% { top: 13%; right: 21%; bottom: 13%; left: 21%; }
100% { top: 8%; right: 40%; bottom: 8%; left: 40%; }
}
@-o-keyframes box-resize7 {
0% { top: 23%; right: 23%; bottom: 23%; left: 23%; }
50% { top: 13%; right: 21%; bottom: 13%; left: 21%; }
100% { top: 8%; right: 40%; bottom: 8%; left: 40%; }
}
@-webkit-keyframes box-resize8 {
0% { top: 17%; right: 40%; bottom: 17%; left: 40%; }
50% { top: 24%; right: 44%; bottom: 24%; left: 44%; }
100% { top: 21%; right: 30%; bottom: 21%; left: 30%; }
}
@-moz-keyframes box-resize8 {
0% { top: 17%; right: 40%; bottom: 17%; left: 40%; }
50% { top: 24%; right: 44%; bottom: 24%; left: 44%; }
100% { top: 21%; right: 30%; bottom: 21%; left: 30%; }
}
@-ms-keyframes box-resize8 {
0% { top: 17%; right: 40%; bottom: 17%; left: 40%; }
50% { top: 24%; right: 44%; bottom: 24%; left: 44%; }
100% { top: 21%; right: 30%; bottom: 21%; left: 30%; }
}
@-o-keyframes box-resize8 {
0% { top: 17%; right: 40%; bottom: 17%; left: 40%; }
50% { top: 24%; right: 44%; bottom: 24%; left: 44%; }
100% { top: 21%; right: 30%; bottom: 21%; left: 30%; }
}
@-webkit-keyframes box-resize9 {
0% { top: 12%; right: 12%; bottom: 12%; left: 12%; }
50% { top: 23.333%; right: 5%; bottom: 23.333%; left: 5%; }
100% { top: 12%; right: 2%; bottom: 12%; left: 2%; }
}
@-moz-keyframes box-resize9 {
0% { top: 12%; right: 12%; bottom: 12%; left: 12%; }
50% { top: 23.333%; right: 5%; bottom: 23.333%; left: 5%; }
100% { top: 12%; right: 2%; bottom: 12%; left: 2%; }
}
@-ms-keyframes box-resize9 {
0% { top: 12%; right: 12%; bottom: 12%; left: 12%; }
50% { top: 23.333%; right: 5%; bottom: 23.333%; left: 5%; }
100% { top: 12%; right: 2%; bottom: 12%; left: 2%; }
}
@-o-keyframes box-resize9 {
0% { top: 12%; right: 12%; bottom: 12%; left: 12%; }
50% { top: 23.333%; right: 5%; bottom: 23.333%; left: 5%; }
100% { top: 12%; right: 2%; bottom: 12%; left: 2%; }
}
@-webkit-keyframes box-resize10 {
0% { top: 29%; right: 22%; bottom: 29%; left: 22%; }
50% { top: 11%; right: 11%; bottom: 11%; left: 11%; }
100% { top: 22%; right: 2%; bottom: 22%; left: 2%; }
}
@-moz-keyframes box-resize10 {
0% { top: 29%; right: 22%; bottom: 29%; left: 22%; }
50% { top: 11%; right: 11%; bottom: 11%; left: 11%; }
100% { top: 22%; right: 2%; bottom: 22%; left: 2%; }
}
@-ms-keyframes box-resize10 {
0% { top: 29%; right: 22%; bottom: 29%; left: 22%; }
50% { top: 11%; right: 11%; bottom: 11%; left: 11%; }
100% { top: 22%; right: 2%; bottom: 22%; left: 2%; }
}
@-o-keyframes box-resize10 {
0% { top: 29%; right: 22%; bottom: 29%; left: 22%; }
50% { top: 11%; right: 11%; bottom: 11%; left: 11%; }
100% { top: 22%; right: 2%; bottom: 22%; left: 2%; }
}
/*End Animations*/
Reference in New Issue View Git Blame Copy Permalink