338 lines
13 KiB
CSS
Executable File
338 lines
13 KiB
CSS
Executable File
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Flying Toasters | After Dark in CSS</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="shortcut icon" href="../img/favicon.png" />
|
|
<link rel="stylesheet" href="base.css">
|
|
<style>
|
|
|
|
.toaster {
|
|
position: absolute;
|
|
width: 64px;
|
|
height: 64px;
|
|
background-image: url("../img/toaster-sprite.gif");
|
|
}
|
|
.toast {
|
|
position: absolute;
|
|
width: 64px;
|
|
height: 64px;
|
|
background-image: url("../img/toast1.gif");
|
|
}
|
|
|
|
/**
|
|
* Toaster Animations
|
|
*
|
|
* There are several kinds of toaster animations, marked as t1, t2, & t3.
|
|
*
|
|
* T1 is fastest speed
|
|
* T2 is mid speed & flaps out of sequence with T1
|
|
* T3 is the common speed
|
|
* T4 is a delayed batch going at the fastest speed
|
|
* T5, T6, T7, T8, & T9 are a delayed batch of toasters going at the common speed
|
|
*/
|
|
.t1 {
|
|
-webkit-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
|
|
-moz-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
|
|
-ms-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
|
|
-o-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
|
|
animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
|
|
}
|
|
.t2 {
|
|
-webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
|
|
-moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
|
|
-ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
|
|
-o-animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
|
|
animation: flap .2s steps(4) infinite alternate-reverse, fly 16s linear infinite;
|
|
}
|
|
.t3 {
|
|
-webkit-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
|
|
-moz-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
|
|
-ms-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
|
|
-o-animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
|
|
animation: flap .2s steps(4) infinite alternate, fly 24s linear infinite;
|
|
}
|
|
.t4 {
|
|
-webkit-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
|
|
-moz-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
|
|
-ms-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
|
|
-o-animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
|
|
animation: flap .2s steps(4) infinite alternate, fly 10s 5s linear infinite;
|
|
}
|
|
.t5 {
|
|
-webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
|
|
-moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
|
|
-ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
|
|
-o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
|
|
animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 4s linear infinite;
|
|
}
|
|
.t6 {
|
|
-webkit-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
|
|
-moz-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
|
|
-ms-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
|
|
-o-animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
|
|
animation: flap .2s steps(4) infinite alternate, fly 24s 8s linear infinite;
|
|
}
|
|
.t7 {
|
|
-webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
|
|
-moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
|
|
-ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
|
|
-o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
|
|
animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 12s linear infinite;
|
|
}
|
|
.t8 {
|
|
-webkit-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
|
|
-moz-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
|
|
-ms-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
|
|
-o-animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
|
|
animation: flap .2s steps(4) infinite alternate, fly 24s 16s linear infinite;
|
|
}
|
|
.t9 {
|
|
-webkit-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
|
|
-moz-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
|
|
-ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
|
|
-o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
|
|
animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
|
|
}
|
|
/**
|
|
* Toast Animations
|
|
*
|
|
* There are several kinds of toaster animations, marked as ts1, ts2, & ts3.
|
|
*
|
|
* Tst1 is fast
|
|
* Tst2 is mid speed
|
|
* Tst3 is the common speed
|
|
* Tst4 is a delayed batch of toast going at the common speed
|
|
*/
|
|
.tst1 {
|
|
-webkit-animation: fly 10s linear infinite;
|
|
-moz-animation: fly 10s linear infinite;
|
|
-ms-animation: fly 10s linear infinite;
|
|
-o-animation: fly 10s linear infinite;
|
|
animation: fly 10s linear infinite;
|
|
}
|
|
.tst2 {
|
|
-webkit-animation: fly 16s linear infinite;
|
|
-moz-animation: fly 16s linear infinite;
|
|
-ms-animation: fly 16s linear infinite;
|
|
-o-animation: fly 16s linear infinite;
|
|
animation: fly 16s linear infinite;
|
|
}
|
|
.tst3 {
|
|
-webkit-animation: fly 24s linear infinite;
|
|
-moz-animation: fly 24s linear infinite;
|
|
-ms-animation: fly 24s linear infinite;
|
|
-o-animation: fly 24s linear infinite;
|
|
animation: fly 24s linear infinite;
|
|
}
|
|
.tst4 {
|
|
-webkit-animation: fly 24s 12s linear infinite;
|
|
-moz-animation: fly 24s 12s linear infinite;
|
|
-ms-animation: fly 24s 12s linear infinite;
|
|
-o-animation: fly 24s 12s linear infinite;
|
|
animation: fly 24s 12s linear infinite;
|
|
}
|
|
|
|
/**
|
|
* Starting positions of objects (both toast & toasters).
|
|
* - There is a different position for each object to prevent overlapping.
|
|
* - We use percentages in order to accommodate for all window dimensions.
|
|
* - Use -6% as the smallest amount for remaining off-screen.
|
|
* - Organized into reverse "L" shaped batches to keep a constant flow.
|
|
*/
|
|
/* Batch 1 (-10% to -20%) */
|
|
/* Top edge, from right to left */
|
|
.p6 { right: -2%; top: -17%; }
|
|
.p7 { right: 10%; top: -19%; }
|
|
.p8 { right: 20%; top: -18%; }
|
|
.p9 { right: 30%; top: -20%; }
|
|
.p10 { right: 40%; top: -21%; }
|
|
.p11 { right: 50%; top: -18%; }
|
|
.p12 { right: 60%; top: -20%; }
|
|
/* Right side, from top to bottom */
|
|
.p13 { right: -17%; top: 10%; }
|
|
.p14 { right: -19%; top: 20%; }
|
|
.p15 { right: -21%; top: 30%; }
|
|
.p16 { right: -23%; top: 50%; }
|
|
.p17 { right: -25%; top: 70%; }
|
|
|
|
/* Batch 2 (-20% to -40%) */
|
|
/* Top edge, from right to left */
|
|
.p18 { right: 0%; top: -26%; }
|
|
.p19 { right: 10%; top: -20%; }
|
|
.p20 { right: 20%; top: -36%; }
|
|
.p21 { right: 30%; top: -24%; }
|
|
.p22 { right: 40%; top: -33%; }
|
|
.p23 { right: 60%; top: -40%; }
|
|
/* Right side, from top to bottom */
|
|
.p24 { right: -26%; top: 10%; }
|
|
.p25 { right: -36%; top: 30%; }
|
|
.p26 { right: -29%; top: 50%; }
|
|
|
|
/* Batch 3 (-40% to -60%)*/
|
|
/* Top edge, from right to left */
|
|
.p27 { right: 0; top: -46%; }
|
|
.p28 { right: 10%; top: -56%; }
|
|
.p29 { right: 20%; top: -49%; }
|
|
.p30 { right: 30%; top: -60%; }
|
|
/* Right side, from top to bottom */
|
|
.p31 { right: -46%; top: 10%; }
|
|
.p32 { right: -56%; top: 20%; }
|
|
.p33 { right: -49%; top: 30%; }
|
|
|
|
/* Flapping animation */
|
|
@-webkit-keyframes flap {
|
|
from { background-position: 0px; }
|
|
to { background-position: -256px; }
|
|
}
|
|
@-moz-keyframes flap {
|
|
from { background-position: 0px; }
|
|
to { background-position: -256px; }
|
|
}
|
|
@-o-keyframes flap {
|
|
from { background-position: 0px; }
|
|
to { background-position: -256px; }
|
|
}
|
|
@keyframes flap {
|
|
from { background-position: 0px; }
|
|
to { background-position: -256px; }
|
|
}
|
|
|
|
/* Gliding animation using translate */
|
|
/* Moving 1600px, to accomodate for large screens */
|
|
@-webkit-keyframes fly {
|
|
from {
|
|
-webkit-transform: translate(0, 0);
|
|
-moz-transform: translate(0, 0);
|
|
-o-transform: translate(0, 0);
|
|
-ms-transform: translate(0, 0);
|
|
transform: translate(0, 0);
|
|
}
|
|
to {
|
|
-webkit-transform: translate(-3200px, 1600px);
|
|
-moz-transform: translate(-3200px, 1600px);
|
|
-o-transform: translate(-3200px, 1600px);
|
|
-ms-transform: translate(-3200px, 1600px);
|
|
transform: translate(-3200px, 1600px);
|
|
}
|
|
}
|
|
@-moz-keyframes fly {
|
|
from {
|
|
-webkit-transform: translate(0, 0);
|
|
-moz-transform: translate(0, 0);
|
|
-o-transform: translate(0, 0);
|
|
-ms-transform: translate(0, 0);
|
|
transform: translate(0, 0);
|
|
}
|
|
to {
|
|
-webkit-transform: translate(-3200px, 1600px);
|
|
-moz-transform: translate(-3200px, 1600px);
|
|
-o-transform: translate(-3200px, 1600px);
|
|
-ms-transform: translate(-3200px, 1600px);
|
|
transform: translate(-3200px, 1600px);
|
|
}
|
|
}
|
|
@-o-keyframes fly {
|
|
from {
|
|
-webkit-transform: translate(0, 0);
|
|
-moz-transform: translate(0, 0);
|
|
-o-transform: translate(0, 0);
|
|
-ms-transform: translate(0, 0);
|
|
transform: translate(0, 0);
|
|
}
|
|
to {
|
|
-webkit-transform: translate(-3200px, 1600px);
|
|
-moz-transform: translate(-3200px, 1600px);
|
|
-o-transform: translate(-3200px, 1600px);
|
|
-ms-transform: translate(-3200px, 1600px);
|
|
transform: translate(-3200px, 1600px);
|
|
}
|
|
}
|
|
@keyframes fly {
|
|
from {
|
|
-webkit-transform: translate(0, 0);
|
|
-moz-transform: translate(0, 0);
|
|
-o-transform: translate(0, 0);
|
|
-ms-transform: translate(0, 0);
|
|
transform: translate(0, 0);
|
|
}
|
|
to {
|
|
-webkit-transform: translate(-3200px, 1600px);
|
|
-moz-transform: translate(-3200px, 1600px);
|
|
-o-transform: translate(-3200px, 1600px);
|
|
-ms-transform: translate(-3200px, 1600px);
|
|
transform: translate(-3200px, 1600px);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1 class="visuallyhidden">Flying Toasters - After Dark in CSS</h1>
|
|
|
|
<!-- First group of objects -->
|
|
<div class="toaster t1 p6"></div>
|
|
<div class="toaster t3 p7"></div>
|
|
<div class="toast tst1 p8"></div>
|
|
<div class="toaster t3 p9"></div>
|
|
<div class="toaster t1 p11"></div>
|
|
<div class="toaster t3 p12"></div>
|
|
<div class="toaster t2 p13"></div>
|
|
<div class="toast tst3 p14"></div>
|
|
<div class="toast tst2 p16"></div>
|
|
<div class="toaster t1 p17"></div>
|
|
<div class="toast tst2 p19"></div>
|
|
<div class="toast tst3 p20"></div>
|
|
<div class="toaster t2 p21"></div>
|
|
<div class="toast tst1 p24"></div>
|
|
<div class="toaster t1 p22"></div>
|
|
<div class="toast tst2 p26"></div>
|
|
<div class="toaster t1 p28"></div>
|
|
<div class="toast tst2 p30"></div>
|
|
<div class="toaster t2 p31"></div>
|
|
<div class="toaster t1 p32"></div>
|
|
<div class="toast tst3 p33"></div>
|
|
|
|
<!-- wave 1 of (fast delayed) objects -->
|
|
<div class="toaster t4 p27"></div>
|
|
<div class="toaster t4 p10"></div>
|
|
<div class="toaster t4 p25"></div>
|
|
<div class="toaster t4 p29"></div>
|
|
|
|
<!-- wave 2 of (delayed) objects -->
|
|
<div class="toaster t5 p15"></div>
|
|
<div class="toaster t5 p18"></div>
|
|
<div class="toaster t5 p22"></div>
|
|
|
|
<!-- wave 3 of (delayed) objects -->
|
|
<div class="toaster t6 p6"></div>
|
|
<div class="toaster t6 p11"></div>
|
|
<div class="toaster t6 p15"></div>
|
|
<div class="toaster t6 p19"></div>
|
|
<div class="toaster t6 p23"></div>
|
|
|
|
<!-- wave 5 of (delayed) objects -->
|
|
<div class="toast tst4 p10"></div>
|
|
<div class="toast tst4 p23"></div>
|
|
<div class="toast tst4 p15"></div>
|
|
<div class="toaster t7 p7"></div>
|
|
<div class="toaster t7 p12"></div>
|
|
<div class="toaster t7 p16"></div>
|
|
<div class="toaster t7 p20"></div>
|
|
<div class="toaster t7 p24"></div>
|
|
|
|
<!-- wave 6 of (delayed) objects -->
|
|
<div class="toaster t8 p8"></div>
|
|
<div class="toaster t8 p13"></div>
|
|
<div class="toaster t8 p17"></div>
|
|
<div class="toaster t8 p25"></div>
|
|
|
|
<!-- wave 7 of (delayed) objects -->
|
|
<div class="toaster t9 p14"></div>
|
|
<div class="toaster t9 p18"></div>
|
|
<div class="toaster t9 p21"></div>
|
|
<div class="toaster t9 p26"></div>
|
|
|
|
</body>
|
|
</html> |