"

From 2013.igem.org

.parallax { -webkit-animation: parallax 40s linear infinite; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; -webkit-transform: translateX(0) translate3d(0, 0, 0);

animation: parallax 40s linear infinite; backface-visibility: hidden; perspective: 1000; transform: translate3d(0, 0, 0) }

@keyframes parallax { 0% { transform: translateX(0px) }

100% { transform: translateX(-3000px) } }

@-webkit-keyframes parallax { 0% { -webkit-transform: translateX(0px) translate3d(0, 0, 0) }

100% { -webkit-transform: translateX(-3000px) translate3d(0, 0, 0) } }

.parallax2 { -webkit-animation: parallax2 60s linear infinite; -webkit-backface-visibility: hidden; -webkit-filter: hue-rotate(45deg); -webkit-perspective: 1000; -webkit-transform: translate3d(0, 0, 0);

animation: parallax2 120s linear infinite; backface-visibility: hidden; filter: hue-rotate(45deg); perspective: 1000; transform: translate3d(0, 0, 0) }

@keyframes parallax2 { 0% { transform: translateX(0px) }

100% { transform: translateX(-1500px) } }

@-webkit-keyframes parallax2 { 0% { -webkit-transform: translateX(0px) translate3d(0, 0, 0) }

100% { -webkit-transform: translateX(-1500px) translate3d(0, 0, 0) } }

@keyframes blimp { 0% { left: 2048px }

100% { left: -600px } }

@-webkit-keyframes blimp { 0% { left: 2048px }

100% { left: -600px } }

@keyframes signs { 0% { left: 100% }

100% { left: -1876px } }

@-webkit-keyframes signs { 0% { left: 2048px }

100% { left: -1876px }

}

@keyframes road { 0% { transform: rotateX(65deg) skewX(-20deg) translateX(0) translate3d(0, 0, 0) }

100% { transform: rotateX(65deg) skewX(-20deg) translateX(-60px) translate3d(0, 0, 0) } }

@-webkit-keyframes road { 0% { -webkit-transform: rotateX(50deg) translateX(0) translate3d(0, 0, 0) }

100% { -webkit-transform: rotateX(50deg) translateX(-60px) translate3d(0, 0, 0) } }

@keyframes taxi { 10% { left: 0%; margin-left: -240px }

100% { left: 100%; margin-left: 0px } }

@-webkit-keyframes taxi { 10% { left: 0%; margin-left: -240px }

100% { left: 100%; margin-left: 0px } }

@keyframes pulsate { 0% { opacity: 0; transform: scale(0.1, 0.1) }

50% { opacity: 1 }

100% { opacity: 0; transform: scale(1.2, 1.2) } }

@-webkit-keyframes pulsate { 0% { -webkit-transform: scale(0.1, 0.1); opacity: 0 }

50% { opacity: 1 }

100% { -webkit-transform: scale(1.2, 1.2); opacity: 0 } }

@keyframes pulsate2 { 0% { opacity: 0; transform: scale(0.1, 0.1) rotate(65deg) }

50% { opacity: 1 }

100% { opacity: 0; transform: scale(1.2, 1.2) rotate(65deg) } }

@-webkit-keyframes pulsate2 { 0% { -webkit-transform: scale(0.1, 0.1) rotate(90deg); opacity: 0 }

50% { opacity: 1 }

100% { -webkit-transform: scale(1.2, 1.2) rotate(90deg); opacity: 0 } }

.floating { -webkit-animation: floating 1.5s linear infinite; animation: floating 1.5s linear infinite }

@keyframes floating { 0% { transform: translateX(0%) }

50% { transform: translateZ(25px) translateY(20px) }

100% { transform: translateX(0%) } }

@-webkit-keyframes floating { 0% { -webkit-transform: translateX(0%) }

50% { -webkit-transform: translateZ(25px) translateY(20px) }

100% { -webkit-transform: translateX(0%) } }

.radar { -webkit-animation: radar 7s linear infinite; animation: radar 7s linear infinite }

@keyframes radar { 0% { box-shadow: inset 0px 0px 25px rgba(0, 0, 0, 0.25), 0px 5px 0px 3px rgba(255, 25, 25, 0.75), 0px 10px 0px 10px rgba(0, 0, 0, 0.75),

0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0) }

25% { box-shadow: inset 0px 0px 25px rgba(0, 0, 0, 0.25), 0px 5px 0px 3px rgba(255, 25, 25, 0.75), 0px 10px 0px 10px rgba(0, 0, 0, 0.75),

0px 0px 0px 100px rgba(0, 0, 0, 0.25), 0px 0px 0px 0px rgba(0, 0, 0, 0.25), 0px 0px 0px 430px rgba(0, 0, 0, 0.1) }

50% { box-shadow: inset 0px 0px 25px rgba(0, 0, 0, 0.25), 0px 5px 0px 3px rgba(255, 25, 25, 0.75), 0px 10px 0px 10px rgba(0, 0, 0, 0.75),

0px 0px 0px 200px rgba(0, 0, 0, 0.0), 0px 0px 0px 100px rgba(0, 0, 0, 0), 0px 0px 0px 960px rgba(0, 0, 0, 0) } }

@-webkit-keyframes radar { 0% { box-shadow: inset 0px 0px 25px rgba(0, 0, 0, 0.25), 0px 5px 0px 3px rgba(255, 25, 25, 0.75), 0px 10px 0px 10px rgba(0, 0, 0, 0.75),

0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0) }

15% { box-shadow: inset 0px 0px 25px rgba(0, 0, 0, 0.25), 0px 5px 0px 3px rgba(255, 25, 25, 0.75), 0px 10px 0px 10px rgba(0, 0, 0, 0.75),

0px 0px 0px 100px rgba(0, 0, 0, 0.25), 0px 0px 0px 0px rgba(0, 0, 0, 0.25), 0px 0px 0px 430px rgba(0, 0, 0, 0.1) }

50% { box-shadow: inset 0px 0px 25px rgba(0, 0, 0, 0.25), 0px 5px 0px 3px rgba(255, 25, 25, 0.75), 0px 10px 0px 10px rgba(0, 0, 0, 0.75),

0px 0px 0px 200px rgba(0, 0, 0, 0.0), 0px 0px 0px 100px rgba(0, 0, 0, 0), 0px 0px 0px 960px rgba(0, 0, 0, 0) } }

.hatch { animation: hatch 2s ease-in-out infinite; -webkit-animation: hatch 2s ease-in-out infinite;

transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100% }

@keyframes hatch { 0% { transform: rotate(0deg); }

20% { transform: rotate(-2deg); }

35% { transform: rotate(2deg); }

50% { transform: rotate(-2deg); }

65% { transform: rotate(1deg); }

80% { transform: rotate(-1deg); }

100% { transform: rotate(0deg); } }

@-webkit-keyframes hatch { 0% { -webkit-transform: rotate(0deg); }

20% { -webkit-transform: rotate(-2deg); }

35% { -webkit-transform: rotate(2deg) scaleY(1); }

50% { -webkit-transform: rotate(-2deg); }

65% { -webkit-transform: rotate(1deg); }

80% { -webkit-transform: rotate(-1deg); }

100% { -webkit-transform: rotate(0deg); } }

.tossing { animation: tossing 2.5s ease-in-out infinite; -webkit-animation: tossing 2.5s ease-in-out infinite }

@keyframes tossing { 0% { transform: rotate(-4deg) }

50% { transform: rotate(4deg) }

100% { transform: rotate(-4deg) } }

@-webkit-keyframes tossing { 0% { -webkit-transform: rotate(-4deg) translate3d(0, 0, 0) }

50% { -webkit-transform: rotate(4deg) translate3d(0, 0, 0) }

100% { -webkit-transform: rotate(-4deg) translate3d(0, 0, 0) } }

.heartbeat { animation: heartbeat 3s linear infinite; -webkit-animation: heartbeat 3s linear infinite }

@keyframes heartbeat { 0% { transform: scale(1) }

10% { transform: scale(0.75) }

20% { transform: scale(1) }

30% { transform: scale(0.75) }

40% { transform: scale(1) }

100% { transform: scale(1) } }

@-webkit-keyframes heartbeat { 0% { -webkit-transform: scale(1) }

10% { -webkit-transform: scale(0.75) }

20% { -webkit-transform: scale(1) }

30% { -webkit-transform: scale(0.75) }

40% { -webkit-transform: scale(1) }

100% { -webkit-transform: scale(1) } }

.bounce { animation: bounce 0.75s cubic-bezier(0.680, -0.550, 0.265, 1.550); -webkit-animation: bounce 0.75s cubic-bezier(0.680, -0.550, 0.265, 1.550);

transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100% }

@keyframes bounce { 0% { transform: translateY(0%) scaleY(0.6) }

60% { transform: translateY(-100%) scaleY(1.1) }

70% { transform: translateY(0%) scaleY(0.95) scaleX(1.05) }

80% { transform: translateY(0%) scaleY(1.05) scaleX(1) }

90% { transform: translateY(0%) scaleY(0.95) scaleX(1) }

100% { transform: translateY(0%) scaleY(1) scaleX(1) } }

@-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0%) scaleY(0.6) }

60% { -webkit-transform: translateY(-100%) scaleY(1.1) }

70% { -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05) }

80% { -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1) }

90% { -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1) }

100% { -webkit-transform: translateY(0%) scaleY(1) scaleX(1) } }

.entrance { animation: bounce 1.5s ease-out; -webkit-animation: bounce 1.5s ease-out }

@keyframes entrance { 0% { transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2 }

30% { transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1 }

45% { transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1 }

60% { transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1 }

75% { transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1 }

90% { transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1 }

100% { transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1 } }

@-webkit-keyframes entrance { 0% { -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2 }

30% { -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1 }

45% { -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1 }

60% { -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1 }

75% { -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1 }

90% { -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1 }

100% { -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1 } }

.sun { animation: sun 2s cubic-bezier(0.680, -0.550, 0.265, 1.550); -webkit-animation: sun 2s cubic-bezier(0.680, -0.550, 0.265, 1.550);

transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100% }

@keyframes sunentrance { 0% { transform: scale(0) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0 }

100% { transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1 } }

@-webkit-keyframes sun { 0% { -webkit-transform: scale(0) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0 }

100% { -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1 } }