@charset "UTF-8"; /************************************************************************************************************************************** Functions : Cascaded style sheet for Advertisement customization File name : style_animation.css Motivation and Restricted Items This Website Platform was created for the purpose of configuring website system by the general purpose functions whose code is CSS3, as the concept of web accessability and furthermore, functionality for usability. Restrictions and Notification This programs are intended only for the individual or entity to which it is addressed and may contain confidential information or forward-looking statements regarding product development. If you are not the intended recipient, you are hereby notified that any dissemination of this website(including any attachments thereto) is strictly prohibited. If you have received this website in error, please notify the sender immediately by telephone or email and permanently destroy the original without making any copy. Please note that any material and advice from this site is provided free of charge and shall be used as an example for demonstration purposes only. My website supplier makes no warranties that the usage of information or advice from this website will not infringe any intellectual property rights(e.g. patents, copyrights). Our site cannot guarantee bug free operation and the recipient will use and/or distribute it only at his own risk in no event shall our site be liable for any damage. Modification history Revision Date Functions 1.0 Nov. 21 2013 New Entry ***************************************************************************************************************************************/ /* Basic animation behaviors specification */ @-webkit-keyframes open { 0%{ -webkit-transform: scale(1,0); } 100%{ -webkit-transform: scale(1,1); } } @-webkit-keyframes squeeze { 0%{ height: 400px; } 100%{ height: 120px; } } @-webkit-keyframes fadeOut { 0%{ opacity: 1; } 100%{ opacity: 0; } } @-webkit-keyframes fadeIn { 0%{ opacity: 0; } 100%{ opacity: 1; } } @-webkit-keyframes slideLeft { 0%{ -webkit-transform: translateX(0%); } 100%{ -webkit-transform: translateX(-400%); } } @-webkit-keyframes slideRight { 0%{ -webkit-transform: translateX(0%);} 100%{ -webkit-transform: translateX(400%); } } @-webkit-keyframes slideLeftRight { 0%{ -webkit-transform: translateX(-200%);} 25%{ -webkit-transform: translateX(0%); } 50%{ -webkit-transform: translateX(200%); } 75%{ -webkit-transform: translateX( 0%);} 100%{ -webkit-transform: translateX(-200%); } } @-webkit-keyframes slideRightLeft { 0%{ -webkit-transform: translateX( 200%);} 25%{ -webkit-transform: translateX(0%); } 50%{ -webkit-transform: translateX(-200%); } 75%{ -webkit-transform: translateX( 0%);} 100%{ -webkit-transform: translateX(200%); } } @-webkit-keyframes slideTopBottom { 0%{ -webkit-transform: translateY(-100%);} 25%{ -webkit-transform: translateY(0%); } 50%{ -webkit-transform: translateY(100%); } 75%{ -webkit-transform: translateY( 0%);} 100%{ -webkit-transform: translateY(-100%); } } @-webkit-keyframes slideOblique { 0%{ -webkit-transform: translate(100%, 100%);} 25%{ -webkit-transform: translate( 0%, 0%); } 50%{ -webkit-transform: translate(-100%,-100%); } 75%{ -webkit-transform: translate( 0%, 0%);} 100%{ -webkit-transform: translate(100%,100%); } } @-webkit-keyframes slideOblique2 { 0%{ -webkit-transform: translate(-100%,-100%);} 25%{ -webkit-transform: translate( 0%, 0%); } 50%{ -webkit-transform: translate(100%,100%); } 75%{ -webkit-transform: translate( 0%, 0%);} 100%{ -webkit-transform: translate(-100%,-100%); } } @-webkit-keyframes moveUp { 0%{ -webkit-transform: translateY(0px); } 100%{ -webkit-transform: translateY(-10px);} } @-webkit-keyframes moveUp2 { 0%{ -webkit-transform: translateY(0px); } 100%{ -webkit-transform: translateY(-60px);} } @-webkit-keyframes zoomOut { 0%{ -webkit-transform: scale(1); } 100%{ -webkit-transform: scale(0); } } @-webkit-keyframes zoomIn { 0%{ -webkit-transform: scale(0); } 100%{ -webkit-transform: scale(1); } } @-webkit-keyframes zoomInOut { 0%{ -webkit-transform: scale(0); } 50%{ -webkit-transform: scale(1); } 100%{ -webkit-transform: scale(0); } } @-webkit-keyframes zoomIn2 { 0%{ -webkit-transform: scale(1); } 100%{ -webkit-transform: scale(2); } } @-webkit-keyframes zoomOut2 { 0%{ -webkit-transform: scale(2); } 100%{ -webkit-transform: scale(1); } } @-webkit-keyframes transpolygon { 0%{ -webkit-transform: scale(1); } 100%{ border-radius:10px; } } @-moz-keyframes open { 0%{ -moz-transform: scale(1,0); } 100%{ -moz-transform: scale(1,1); } } @-moz-keyframes squeeze { 0%{ height: 400px; } 100%{ height: 120px; } } @-moz-keyframes fadeOut { 0%{ opacity: 1; } 100%{ opacity: 0; } } @-moz-keyframes fadeIn { 0%{ opacity: 0; } 100%{ opacity: 1; } } @-moz-keyframes slideLeft { 0%{ -moz-transform: translateX(0%); } 100%{ -moz-transform: translateX(-400%); } } @-moz-keyframes slideRight { 0%{ -moz-transform: translateX(0%);} 100%{ -moz-transform: translateX(400%); } } @-moz-keyframes slideLeftRight { 0%{ -moz-transform: translateX(-200%);} 25%{ -moz-transform: translateX(0%); } 50%{ -moz-transform: translateX(200%); } 75%{ -moz-transform: translateX( 0%);}100%{ -moz-transform: translateX(-200%); } } @-moz-keyframes slideRightLeft { 0%{ -moz-transform: translateX( 200%);} 25%{ -moz-transform: translateX(0%); } 50%{ -moz-transform: translateX(-200%); } 75%{ -moz-transform: translateX( 0%);} 100%{ -moz-transform: translateX(200%); } } @-moz-keyframes slideTopBottom { 0%{ -moz-transform: translateY(-100%);} 25%{ -moz-transform: translateY(0%); } 50%{ -moz-transform: translateY(100%); } 75%{ -moz-transform: translateY( 0%);} 100%{ -moz-transform: translateY(-100%); } } @-moz-keyframes slideOblique { 0%{ -moz-transform: translate(100%, 100%);} 25%{ -moz-transform: translate( 0%, 0%); } 50%{ -moz-transform: translate(-100%,-100%); } 75%{ -moz-transform: translate( 0%, 0%);} 100%{ -moz-transform: translate(100%,100%); } } @-moz-keyframes slideOblique2 { 0%{ -moz-transform: translate(-100%,-100%);} 25%{ -moz-transform: translate( 0%, 0%); } 50%{ -moz-transform: translate(100%,100%); } 75%{ -moz-transform: translate( 0%, 0%);} 100%{ -moz-transform: translate(-100%,-100%); } } @-moz-keyframes moveUp { 0%{ -moz-transform: translateY(0px); } 100%{ -moz-transform: translateY(-10px); } } @-moz-keyframes moveUp2 { 0%{ -moz-transform: translateY(0px); } 100%{ -moz-transform: translateY(-60px); } } @-moz-keyframes zoomOut { 0%{ -moz-transform: scale(1); } 100%{ -moz-transform: scale(0); } } @-moz-keyframes zoomIn { 0%{ -moz-transform: scale(0); } 100%{ -moz-transform: scale(1); } } @-moz-keyframes zoomInOut { 0%{ -moz-transform: scale(0); } 50%{ -moz-transform: scale(1); } 100%{ -moz-transform: scale(0); } } @-moz-keyframes zoomIn2 { 0%{ -moz-transform: scale(1); } 100%{ -moz-transform: scale(2); } } @-moz-keyframes zoomOut2 { 0%{ -moz-transform: scale(2); } 100%{ -moz-transform: scale(1); } } @-moz-keyframes transpolygon { 0%{ -moz-transform: scale(1); } 100%{ border-radius:10px; } } @-ms-keyframes open { 0%{ -ms-transform: scale(1,0); } 100%{ -ms-transform: scale(1,1); } } @-ms-keyframes squeeze { 0%{ height: 400px; } 100%{ height: 120px; } } @-ms-keyframes fadeOut { 0%{ opacity: 1; } 100%{ opacity: 0; } } @-ms-keyframes fadeIn { 0%{ opacity: 0; } 100%{ opacity: 1; } } @-ms-keyframes slideLeft { 0%{ -ms-transform: translateX(0%); } 100%{ -ms-transform: translateX(-400%); } } @-ms-keyframes slideRight { 0%{ -ms-transform: translateX(0%);} 100%{ -ms-transform: translateX(400%); } } @-ms-keyframes slideLeftRight { 0%{ -ms-transform: translateX(-200%);} 25%{ -ms-transform: translateX(0%); } 50%{ -ms-transform: translateX(200%); } 75%{ -ms-transform: translateX( 0%);}100%{ -ms-transform: translateX(-200%); } } @-ms-keyframes slideRightLeft { 0%{ -ms-transform: translateX( 200%);} 25%{ -ms-transform: translateX(0%); } 50%{ -ms-transform: translateX(-200%); } 75%{ -ms-transform: translateX( 0%);} 100%{ -ms-transform: translateX(200%); } } @-ms-keyframes slideTopBottom { 0%{ -ms-transform: translateY(-100%);} 25%{ -ms-transform: translateY(0%); } 50%{ -ms-transform: translateY(100%); } 75%{ -ms-transform: translateY( 0%);} 100%{ -ms-transform: translateY(-100%); } } @-ms-keyframes slideOblique { 0%{ -ms-transform: translate(100%, 100%);} 25%{ -ms-transform: translate( 0%, 0%); } 50%{ -ms-transform: translate(-100%,-100%); } 75%{ -ms-transform: translate( 0%, 0%);} 100%{ -ms-transform: translate(100%,100%); } } @-ms-keyframes slideOblique2 { 0%{ -ms-transform: translate(-100%,-100%);} 25%{ -ms-transform: translate( 0%, 0%); } 50%{ -ms-transform: translate(100%,100%); } 75%{ -ms-transform: translate( 0%, 0%);} 100%{ -ms-transform: translate(-100%,-100%); } } @-ms-keyframes moveUp { 0%{ -ms-transform: translateY(0px); } 100%{ -ms-transform: translateY(-10px); } } @-ms-keyframes moveUp2 { 0%{ -ms-transform: translateY(0px); } 100%{ -ms-transform: translateY(-60px); } } @-ms-keyframes zoomOut { 0%{ -ms-transform: scale(1); } 100%{ -ms-transform: scale(0); } } @-ms-keyframes zoomIn { 0%{ -ms-transform: scale(0); } 100%{ -ms-transform: scale(1); } } @-ms-keyframes zoomInOut { 0%{ -ms-transform: scale(0); } 50%{ -ms-transform: scale(1); } 100%{ -ms-transform: scale(0); } } @-ms-keyframes zoomIn2 { 0%{ -ms-transform: scale(1); } 100%{ -ms-transform: scale(2); } } @-ms-keyframes zoomOut2 { 0%{ -ms-transform: scale(2); } 100%{ -ms-transform: scale(1); } } @-ms-keyframes transpolygon { 0%{ -ms-transform: scale(1); } 100%{ border-radius:10px; } } @-o-keyframes open { 0%{ -o-transform: scale(1,0); } 100%{ -o-transform: scale(1,1); } } @-o-keyframes squeeze { 0%{ height: 400px; } 100%{ height: 120px; } } @-o-keyframes fadeOut { 0%{ opacity: 1; } 100%{ opacity: 0; } } @-o-keyframes fadeIn { 0%{ opacity: 0; } 100%{ opacity: 1; } } @-o-keyframes slideLeft { 0%{ -o-transform: translateX(0%); } 100%{ -o-transform: translateX(-400%); } } @-o-keyframes slideRight { 0%{ -o-transform: translateX(0%);} 100%{ -o-transform: translateX(400%); } } @-o-keyframes slideLeftRight { 0%{ -o-transform: translateX(-200%);} 25%{ -o-transform: translateX(0%); } 50%{ -o-transform: translateX(200%); } 75%{ -o-transform: translateX( 0%);}100%{ -o-transform: translateX(-200%); } } @-o-keyframes slideRightLeft { 0%{ -o-transform: translateX( 200%);} 25%{ -o-transform: translateX(0%); } 50%{ -o-transform: translateX(-200%); } 75%{ -o-transform: translateX( 0%);} 100%{ -o-transform: translateX(200%); } } @-o-keyframes slideTopBottom { 0%{ -o-transform: translateY(-100%);} 25%{ -o-transform: translateY(0%); } 50%{ -o-transform: translateY(100%); } 75%{ -o-transform: translateY( 0%);} 100%{ -o-transform: translateY(-100%); } } @-o-keyframes slideOblique { 0%{ -o-transform: translate(100%, 100%);} 25%{ -o-transform: translate( 0%, 0%); } 50%{ -o-transform: translate(-100%,-100%); } 75%{ -o-transform: translate( 0%, 0%);} 100%{ -o-transform: translate(100%,100%); } } @-o-keyframes slideOblique2 { 0%{ -o-transform: translate(-100%,-100%);} 25%{ -o-transform: translate( 0%, 0%); } 50%{ -o-transform: translate(100%,100%); } 75%{ -o-transform: translate( 0%, 0%);} 100%{ -o-transform: translate(-100%,-100%); } } @-o-keyframes moveUp { 0%{ -o-transform: translateY(0px); } 100%{ -o-transform: translateY(-10px); } } @-o-keyframes moveUp2 { 0%{ -o-transform: translateY(0px); } 100%{ -o-transform: translateY(-60px); } } @-o-keyframes zoomOut { 0%{ -o-transform: scale(1); } 100%{ -o-transform: scale(0); } } @-o-keyframes zoomIn { 0%{ -o-transform: scale(0); } 100%{ -o-transform: scale(1); } } @-o-keyframes zoomInOut { 0%{ -o-transform: scale(0); } 50%{ -o-transform: scale(1); } 100%{ -o-transform: scale(0); } } @-o-keyframes zoomIn2 { 0%{ -o-transform: scale(1); } 100%{ -o-transform: scale(2); } } @-o-keyframes zoomOut2 { 0%{ -o-transform: scale(2); } 100%{ -o-transform: scale(1); } } @-o-keyframes transpolygon { 0%{ -o-transform: scale(1); } 100%{ border-radius:10px; } } @keyframes open { 0%{ transform: scale(1,0); } 100%{ transform: scale(1,1); } } @keyframes squeeze { 0%{ height: 400px; } 100%{ height: 120px; } } @keyframes fadeOut { 0%{ opacity: 1; } 100%{ opacity: 0; } } @keyframes fadeIn { 0%{ opacity: 0; } 100%{ opacity: 1; } } @keyframes slideLeft { 0%{ transform: translateX(0%); } 100%{ transform: translateX(-400%); } } @keyframes slideRight { 0%{ transform: translateX(0%);} 100%{ transform: translateX(400%); } } @keyframes slideLeftRight { 0%{ transform: translateX(-200%); } 25%{ transform: translateX(0%); } 50%{ transform: translateX(200%); } 75%{ transform: translateX( 0%);} 100%{ transform: translateX(-200%); } } @keyframes slideRightLeft { 0%{ transform: translateX( 200%);} 25%{ transform: translateX(0%); } 50%{ transform: translateX(-200%); } 75%{ transform: translateX( 0%);} 100%{ transform: translateX(200%); } } @keyframes slideTopBottom { 0%{ transform: translateY(-100%);} 25%{ transform: translateY(0%); } 50%{ transform: translateY(100%); } 75%{ transform: translateY( 0%);} 100%{ transform: translateY(-100%); } } @keyframes slideOblique { 0%{ transform: translate(100%, 100%);} 25%{ transform: translate( 0%, 0%); } 50%{ transform: translate(-100%,-100%); } 75%{ transform: translate( 0%, 0%);} 100%{ transform: translate(100%,100%); } } @keyframes slideOblique2 { 0%{ transform: translate(-100%,-100%);} 25%{ transform: translate( 0%, 0%); } 50%{ transform: translate(100%,100%); } 75%{ transform: translate( 0%, 0%);} 100%{ transform: translate(-100%,-100%); } } @keyframes moveUp { 0%{ transform: translateY(0px); } 100%{ transform: translateY(-10px); } } @keyframes moveUp2 { 0%{ transform: translateY(0px); } 100%{ transform: translateY(-60px); } } @keyframes zoomOut { 0%{ transform: scale(1); } 100%{ transform: scale(0); } } @keyframes zoomIn { 0%{ transform: scale(0); } 100%{ transform: scale(1); } } @keyframes zoomInOut { 0%{ transform: scale(0); } 50%{ transform: scale(1); } 100%{ transform: scale(0); } } @keyframes zoomIn2 { 0%{ transform: scale(1); } 100%{ transform: scale(2); } } @keyframes zoomOut2 { 0%{ transform: scale(2); } 100%{ transform: scale(1); } } @keyframes transpolygon { 0%{ transform: scale(1); } 100%{ border-radius:10px; } } /* Logo animation behaviors specification */ @-webkit-keyframes figure_behavior { 0%{ background-color: #fc0; -webkit-transform: rotate(0deg) scale(1,0); } 10%{ background-color: #f00; -webkit-transform: rotate(45deg) scale(1,5); } 20%{ background-color: #fc0; -webkit-transform: rotate(90deg) scale(1,0); } 30%{ background-color: #f00; -webkit-transform: rotate(135deg) scale(1,5); } 40%{ background-color: #fc0; -webkit-transform: rotate(180deg) scale(1,0); } 100%{ background-color: #f00; -webkit-transform: rotate(1440deg) scale(3,0); } } @-moz-keyframes figure_behavior { 0%{ background-color: #fc0; -moz-transform: rotate(0deg) scale(1,0); } 10%{ background-color: #f00; -moz-transform: rotate(45deg) scale(1,5); } 20%{ background-color: #fc0; -moz-transform: rotate(90deg) scale(1,0); } 30%{ background-color: #f00; -moz-transform: rotate(135deg) scale(1,5); } 40%{ background-color: #fc0; -moz-transform: rotate(180deg) scale(1,0); } 100%{ background-color: #f00; -moz-transform: rotate(1440deg) scale(3,0); } } @keyframes figure_behavior { 0%{ background-color: #fc0; transform: rotate(0deg) scale(1,0); } 10%{ background-color: #f00; transform: rotate(45deg) scale(1,5); } 20%{ background-color: #fc0; transform: rotate(90deg) scale(1,0); } 30%{ background-color: #f00; transform: rotate(135deg) scale(1,5); } 40%{ background-color: #fc0; transform: rotate(180deg) scale(1,0); } 100%{ background-color: #f00; transform: rotate(1440deg) scale(3,0); } } /* Scroll bar color transition */ @-webkit-keyframes rainbow_horizontal_bar { 0% { width: 10px; height: 25px; background-color:#f69; } 20% { width: 30px; height: 25px; background-color:#fc0; } 40% { width: 50px; height: 25px; background-color:#3c3; } 60% { width: 70px; height: 25px; background-color:#09f; } 80% { width: 90px; height: 25px; background-color:#96f; } 100% { width: 100px; height: 25px; background-color:#000; } } @-moz-keyframes rainbow_horizontal_bar { 0% { width: 10px; height: 25px; background-color:#f69; } 20% { width: 30px; height: 25px; background-color:#fc0; } 40% { width: 50px; height: 25px; background-color:#3c3; } 60% { width: 70px; height: 25px; background-color:#09f; } 80% { width: 90px; height: 25px; background-color:#96f; } 100% { width: 100px; height: 25px; background-color:#000; } } @keyframes rainbow_horizontal_bar { 0% { width: 10px; height: 25px; background-color:#f69; } 20% { width: 30px; height: 25px; background-color:#fc0; } 40% { width: 50px; height: 25px; background-color:#3c3; } 60% { width: 70px; height: 25px; background-color:#09f; } 80% { width: 90px; height: 25px; background-color:#96f; } 100% { width: 100px; height: 25px; background-color:#000; } } @-webkit-keyframes rainbow_vertical_bar { 0% { width: 50px; height: 50px; background-color:#f69; } 20% { width: 50px; height: 60px; background-color:#fc0; } 40% { width: 50px; height: 70px; background-color:#3c3; } 60% { width: 50px; height: 80px; background-color:#09f; } 80% { width: 50px; height: 90px; background-color:#96f; } 100% { width: 50px; height:100px; background-color:#fff; } } @-moz-keyframes rainbow_vertical_bar { 0% { width: 50px; height: 50px; background-color:#f69; } 20% { width: 50px; height: 60px; background-color:#fc0; } 40% { width: 50px; height: 70px; background-color:#3c3; } 60% { width: 50px; height: 80px; background-color:#09f; } 80% { width: 50px; height: 90px; background-color:#96f; } 100% { width: 50px; height:100px; background-color:#fff; } } @keyframes rainbow_vertical_bar { 0% { width: 50px; height: 50px; background-color:#f69; } 20% { width: 50px; height: 60px; background-color:#fc0; } 40% { width: 50px; height: 70px; background-color:#3c3; } 60% { width: 50px; height: 80px; background-color:#09f; } 80% { width: 50px; height: 90px; background-color:#96f; } 100% { width: 50px; height:100px; background-color:#fff; } } @-webkit-keyframes shake { 0% { -webkit-transform: translate( 3px, 2px) rotate( 0deg); } 10% { -webkit-transform: translate(-2px,-3px) rotate(-1deg); } 20% { -webkit-transform: translate(-4px, 0px) rotate( 1deg); } 30% { -webkit-transform: translate( 0px, 3px) rotate( 0deg); } 40% { -webkit-transform: translate( 2px,-2px) rotate( 1deg); } 50% { -webkit-transform: translate(-2px, 3px) rotate(-1deg); } 60% { -webkit-transform: translate(-4px, 2px) rotate( 0deg); } 70% { -webkit-transform: translate( 3px, 2px) rotate(-1deg); } 80% { -webkit-transform: translate(-2px,-2px) rotate( 1deg); } 90% { -webkit-transform: translate( 2px, 4px) rotate( 0deg); } 100% { -webkit-transform: translate( 2px,-3px) rotate(-1deg); } } @-moz-keyframes shake { 0% { -moz-transform: translate( 3px, 2px) rotate( 0deg); } 10% { -moz-transform: translate(-2px,-3px) rotate(-1deg); } 20% { -moz-transform: translate(-4px, 0px) rotate( 1deg); } 30% { -moz-transform: translate( 0px, 3px) rotate( 0deg); } 40% { -moz-transform: translate( 2px,-2px) rotate( 1deg); } 50% { -moz-transform: translate(-2px, 3px) rotate(-1deg); } 60% { -moz-transform: translate(-4px, 2px) rotate( 0deg); } 70% { -moz-transform: translate( 3px, 2px) rotate(-1deg); } 80% { -moz-transform: translate(-2px,-2px) rotate( 1deg); } 90% { -moz-transform: translate( 2px, 4px) rotate( 0deg); } 100% { -moz-transform: translate( 2px,-3px) rotate(-1deg); } } @keyframes shake { 0% { transform: translate( 3px, 2px) rotate( 0deg); } 10% { transform: translate(-2px,-3px) rotate(-1deg); } 20% { transform: translate(-4px, 0px) rotate( 1deg); } 30% { transform: translate( 0px, 3px) rotate( 0deg); } 40% { transform: translate( 2px,-2px) rotate( 1deg); } 50% { transform: translate(-2px, 3px) rotate(-1deg); } 60% { transform: translate(-4px, 2px) rotate( 0deg); } 70% { transform: translate( 3px, 2px) rotate(-1deg); } 80% { transform: translate(-2px,-2px) rotate( 1deg); } 90% { transform: translate( 2px, 4px) rotate( 0deg); } 100% { transform: translate( 2px,-3px) rotate(-1deg); } } @-webkit-keyframes comet { 0% { -webkit-transform: translate( 0px, 0px) rotate( 0deg) scale(1.0,1.0) } 5% { -webkit-transform: translate( 100px, 250px) rotate( 23deg) scale(1.3,1.3) } 10% { -webkit-transform: translate(-200px,-300px) rotate(-10deg) scale(1.5,1.5) } 15% { -webkit-transform: translate( 50px, 40px) rotate( 0deg) scale(1.0,1.0) } 20% { -webkit-transform: translate(-400px, 0px) rotate( 10deg) scale(0.6,0.6) } 25% { -webkit-transform: translate(-200px,-300px) rotate(-10deg) scale(1.5,1.5) } 30% { -webkit-transform: translate( 0px, 300px) rotate( 23deg) scale(1.2,1.2) } 35% { -webkit-transform: translate(-200px,-300px) rotate(-10deg) scale(1.8,1.8) } 40% { -webkit-transform: translate( 200px,-200px) rotate( 10deg) scale(0.8,0.8) } 45% { -webkit-transform: translate( 0px, 150px) rotate(-23deg) scale(1.5,1.5) } 50% { -webkit-transform: translate(-200px, 300px) rotate(-10deg) scale(0.5,0.5) } 55% { -webkit-transform: translate( 100px,-600px) rotate( 23deg) scale(1.6,1.6) } 60% { -webkit-transform: translate(-400px, 200px) rotate( 0deg) scale(1.2,1.2) } 65% { -webkit-transform: translate(-100px,-300px) rotate(-15deg) scale(0.8,0.8) } 70% { -webkit-transform: translate( 300px, 200px) rotate(-10deg) scale(1.8,1.8) } 75% { -webkit-transform: translate(-200px,-300px) rotate( 23deg) scale(1.3,1.3) } 80% { -webkit-transform: translate(-200px,-200px) rotate( 10deg) scale(1.0,1.0) } 85% { -webkit-transform: translate(-100px,-700px) rotate(-10deg) scale(1.5,1.5) } 90% { -webkit-transform: translate( 200px, 400px) rotate( 23deg) scale(0.2,0.2) } 95% { -webkit-transform: translate(-200px,-300px) rotate(-10deg) scale(1.5,1.5) } 100% { -webkit-transform: translate( 0px, 0px) rotate( 0deg) scale(1.0,1.0) } } @-moz-keyframes comet { 0% { -moz-transform: translate( 0px, 0px) rotate( 0deg) scale(1.0,1.0) } 5% { -moz-transform: translate( 100px, 250px) rotate( 23deg) scale(1.3,1.3) } 10% { -moz-transform: translate(-200px,-300px) rotate(-10deg) scale(1.5,1.5) } 15% { -moz-transform: translate( 50px, 40px) rotate( 0deg) scale(1.0,1.0) } 20% { -moz-transform: translate(-400px, 0px) rotate( 10deg) scale(0.6,0.6) } 25% { -moz-transform: translate(-200px,-300px) rotate(-10deg) scale(1.5,1.5) } 30% { -moz-transform: translate( 0px, 300px) rotate( 23deg) scale(1.2,1.2) } 35% { -moz-transform: translate(-200px,-300px) rotate(-10deg) scale(1.8,1.8) } 40% { -moz-transform: translate( 200px,-200px) rotate( 10deg) scale(0.8,0.8) } 45% { -moz-transform: translate( 0px, 150px) rotate(-23deg) scale(1.5,1.5) } 50% { -moz-transform: translate(-200px, 300px) rotate(-10deg) scale(0.5,0.5) } 55% { -moz-transform: translate( 100px,-600px) rotate( 23deg) scale(1.6,1.6) } 60% { -moz-transform: translate(-400px, 200px) rotate( 0deg) scale(1.2,1.2) } 65% { -moz-transform: translate(-100px,-300px) rotate(-15deg) scale(0.8,0.8) } 70% { -moz-transform: translate( 300px, 200px) rotate(-10deg) scale(1.8,1.8) } 75% { -moz-transform: translate(-200px,-300px) rotate( 23deg) scale(1.3,1.3) } 80% { -moz-transform: translate(-200px,-200px) rotate( 10deg) scale(1.0,1.0) } 85% { -moz-transform: translate(-100px,-700px) rotate(-10deg) scale(1.5,1.5) } 90% { -moz-transform: translate( 200px, 400px) rotate( 23deg) scale(0.2,0.2) } 95% { -moz-transform: translate(-200px,-300px) rotate(-10deg) scale(1.5,1.5) } 100% { -moz-transform: translate( 0px, 0px) rotate( 0deg) scale(1.0,1.0) } } @keyframes comet { 0% { transform: translate( 0px, 0px) rotate( 0deg) scale(1.0,1.0) } 5% { transform: translate( 100px, 250px) rotate( 23deg) scale(1.3,1.3) } 10% { transform: translate(-200px,-300px) rotate(-10deg) scale(1.5,1.5) } 15% { transform: translate( 50px, 40px) rotate( 0deg) scale(1.0,1.0) } 20% { transform: translate(-400px, 0px) rotate( 10deg) scale(0.6,0.6) } 25% { transform: translate(-200px,-300px) rotate(-10deg) scale(1.5,1.5) } 30% { transform: translate( 0px, 300px) rotate( 23deg) scale(1.2,1.2) } 35% { transform: translate(-200px,-300px) rotate(-10deg) scale(1.8,1.8) } 40% { transform: translate( 200px,-200px) rotate( 10deg) scale(0.8,0.8) } 45% { transform: translate( 0px, 150px) rotate(-23deg) scale(1.5,1.5) } 50% { transform: translate(-200px, 300px) rotate(-10deg) scale(0.5,0.5) } 55% { transform: translate( 100px,-600px) rotate( 23deg) scale(1.6,1.6) } 60% { transform: translate(-400px, 200px) rotate( 0deg) scale(1.2,1.2) } 65% { transform: translate(-100px,-300px) rotate(-15deg) scale(0.8,0.8) } 70% { transform: translate( 300px, 200px) rotate(-10deg) scale(1.8,1.8) } 75% { transform: translate(-200px,-300px) rotate( 23deg) scale(1.3,1.3) } 80% { transform: translate(-200px,-200px) rotate( 10deg) scale(1.0,1.0) } 85% { transform: translate(-100px,-700px) rotate(-10deg) scale(1.5,1.5) } 90% { transform: translate( 200px, 400px) rotate( 23deg) scale(0.2,0.2) } 95% { transform: translate(-200px,-300px) rotate(-10deg) scale(1.5,1.5) } 100% { transform: translate( 0px, 0px) rotate( 0deg) scale(1.0,1.0) } } @-webkit-keyframes cycle1 { 0% { -webkit-transform: translate( 0px, 0px) rotate( 0deg) } 5% { -webkit-transform: translate( 60px, -20px) rotate(-18deg) } 10% { -webkit-transform: translate( 100px, -50px) rotate(-36deg) } 15% { -webkit-transform: translate( 130px, -90px) rotate(-54deg) } 20% { -webkit-transform: translate( 150px,-140px) rotate(-72deg) } 25% { -webkit-transform: translate( 160px,-200px) rotate(-90deg) } 30% { -webkit-transform: translate( 150px,-250px) rotate(-108deg) } 35% { -webkit-transform: translate( 130px,-290px) rotate(-126deg) } 40% { -webkit-transform: translate( 100px,-320px) rotate(-144deg) } 45% { -webkit-transform: translate( 60px,-340px) rotate(-162deg) } 50% { -webkit-transform: translate( 0px,-350px) rotate(-180deg) } 55% { -webkit-transform: translate( -60px,-340px) rotate(-198deg) } 60% { -webkit-transform: translate(-100px,-320px) rotate(-216deg) } 65% { -webkit-transform: translate(-130px,-290px) rotate(-234deg) } 70% { -webkit-transform: translate(-150px,-250px) rotate(-252deg) } 75% { -webkit-transform: translate(-160px,-200px) rotate(-270deg) } 80% { -webkit-transform: translate(-150px,-140px) rotate(-288deg) } 85% { -webkit-transform: translate(-130px, -90px) rotate(-306deg) } 90% { -webkit-transform: translate(-100px, -50px) rotate(-324deg) } 95% { -webkit-transform: translate( -60px, -20px) rotate(-342deg) } 100% { -webkit-transform: translate( 0px, 0px) rotate(-360deg) } } @-webkit-keyframes cycle2 { 0% { -webkit-transform: translate( 0px, 0px) rotate( 0deg) } 5% { -webkit-transform: translate( 60px, 20px) rotate( 18deg) } 10% { -webkit-transform: translate( 100px, 50px) rotate( 36deg) } 15% { -webkit-transform: translate( 130px, 90px) rotate( 54deg) } 20% { -webkit-transform: translate( 150px, 140px) rotate( 72deg) } 25% { -webkit-transform: translate( 160px, 200px) rotate( 90deg) } 30% { -webkit-transform: translate( 150px, 250px) rotate(108deg) } 35% { -webkit-transform: translate( 130px, 290px) rotate(126deg) } 40% { -webkit-transform: translate( 100px, 320px) rotate(144deg) } 45% { -webkit-transform: translate( 60px, 340px) rotate(162deg) } 50% { -webkit-transform: translate( 0px, 350px) rotate(180deg) } 55% { -webkit-transform: translate( -60px, 340px) rotate(198deg) } 60% { -webkit-transform: translate(-100px, 320px) rotate(216deg) } 65% { -webkit-transform: translate(-130px, 290px) rotate(234deg) } 70% { -webkit-transform: translate(-150px, 250px) rotate(252deg) } 75% { -webkit-transform: translate(-160px, 200px) rotate(270deg) } 80% { -webkit-transform: translate(-150px, 140px) rotate(288deg) } 85% { -webkit-transform: translate(-130px, 90px) rotate(306deg) } 90% { -webkit-transform: translate(-100px, 50px) rotate(324deg) } 95% { -webkit-transform: translate( -60px, 20px) rotate(342deg) } 100% { -webkit-transform: translate( 0px, 0px) rotate(360deg) } } @-moz-keyframes cycle1 { 0% { -moz-transform: translate( 0px, 0px) rotate( 0deg) } 5% { -moz-transform: translate( 60px, -20px) rotate(-18deg) } 10% { -moz-transform: translate( 100px, -50px) rotate(-36deg) } 15% { -moz-transform: translate( 130px, -90px) rotate(-54deg) } 20% { -moz-transform: translate( 150px,-140px) rotate(-72deg) } 25% { -moz-transform: translate( 160px,-200px) rotate(-90deg) } 30% { -moz-transform: translate( 150px,-250px) rotate(-108deg) } 35% { -moz-transform: translate( 130px,-290px) rotate(-126deg) } 40% { -moz-transform: translate( 100px,-320px) rotate(-144deg) } 45% { -moz-transform: translate( 60px,-340px) rotate(-162deg) } 50% { -moz-transform: translate( 0px,-350px) rotate(-180deg) } 55% { -moz-transform: translate( -60px,-340px) rotate(-198deg) } 60% { -moz-transform: translate(-100px,-320px) rotate(-216deg) } 65% { -moz-transform: translate(-130px,-290px) rotate(-234deg) } 70% { -moz-transform: translate(-150px,-250px) rotate(-252deg) } 75% { -moz-transform: translate(-160px,-200px) rotate(-270deg) } 80% { -moz-transform: translate(-150px,-140px) rotate(-288deg) } 85% { -moz-transform: translate(-130px, -90px) rotate(-306deg) } 90% { -moz-transform: translate(-100px, -50px) rotate(-324deg) } 95% { -moz-transform: translate( -60px, -20px) rotate(-342deg) } 100% { -moz-transform: translate( 0px, 0px) rotate(-360deg) } } @-moz-keyframes cycle2 { 0% { -moz-transform: translate( 0px, 0px) rotate( 0deg) } 5% { -moz-transform: translate( 60px, 20px) rotate( 18deg) } 10% { -moz-transform: translate( 100px, 50px) rotate( 36deg) } 15% { -moz-transform: translate( 130px, 90px) rotate( 54deg) } 20% { -moz-transform: translate( 150px, 140px) rotate( 72deg) } 25% { -moz-transform: translate( 160px, 200px) rotate( 90deg) } 30% { -moz-transform: translate( 150px, 250px) rotate(108deg) } 35% { -moz-transform: translate( 130px, 290px) rotate(126deg) } 40% { -moz-transform: translate( 100px, 320px) rotate(144deg) } 45% { -moz-transform: translate( 60px, 340px) rotate(162deg) } 50% { -moz-transform: translate( 0px, 350px) rotate(180deg) } 55% { -moz-transform: translate( -60px, 340px) rotate(198deg) } 60% { -moz-transform: translate(-100px, 320px) rotate(216deg) } 65% { -moz-transform: translate(-130px, 290px) rotate(234deg) } 70% { -moz-transform: translate(-150px, 250px) rotate(252deg) } 75% { -moz-transform: translate(-160px, 200px) rotate(270deg) } 80% { -moz-transform: translate(-150px, 140px) rotate(288deg) } 85% { -moz-transform: translate(-130px, 90px) rotate(306deg) } 90% { -moz-transform: translate(-100px, 50px) rotate(324deg) } 95% { -moz-transform: translate( -60px, 20px) rotate(342deg) } 100% { -moz-transform: translate( 0px, 0px) rotate(360deg) } } @keyframes cycle1 { 0% { transform: translate( 0px, 0px) rotate( 0deg) } 5% { transform: translate( 60px, -20px) rotate(-18deg) } 10% { transform: translate( 100px, -50px) rotate(-36deg) } 15% { transform: translate( 130px, -90px) rotate(-54deg) } 20% { transform: translate( 150px,-140px) rotate(-72deg) } 25% { transform: translate( 160px,-200px) rotate(-90deg) } 30% { transform: translate( 150px,-250px) rotate(-108deg) } 35% { transform: translate( 130px,-290px) rotate(-126deg) } 40% { transform: translate( 100px,-320px) rotate(-144deg) } 45% { transform: translate( 60px,-340px) rotate(-162deg) } 50% { transform: translate( 0px,-350px) rotate(-180deg) } 55% { transform: translate( -60px,-340px) rotate(-198deg) } 60% { transform: translate(-100px,-320px) rotate(-216deg) } 65% { transform: translate(-130px,-290px) rotate(-234deg) } 70% { transform: translate(-150px,-250px) rotate(-252deg) } 75% { transform: translate(-160px,-200px) rotate(-270deg) } 80% { transform: translate(-150px,-140px) rotate(-288deg) } 85% { transform: translate(-130px, -90px) rotate(-306deg) } 90% { transform: translate(-100px, -50px) rotate(-324deg) } 95% { transform: translate( -60px, -20px) rotate(-342deg) } 100% { transform: translate( 0px, 0px) rotate(-360deg) } } @keyframes cycle2 { 0% { transform: translate( 0px, 0px) rotate( 0deg) } 5% { transform: translate( 60px, 20px) rotate( 18deg) } 10% { transform: translate( 100px, 50px) rotate( 36deg) } 15% { transform: translate( 130px, 90px) rotate( 54deg) } 20% { transform: translate( 150px, 140px) rotate( 72deg) } 25% { transform: translate( 160px, 200px) rotate( 90deg) } 30% { transform: translate( 150px, 250px) rotate(108deg) } 35% { transform: translate( 130px, 290px) rotate(126deg) } 40% { transform: translate( 100px, 320px) rotate(144deg) } 45% { transform: translate( 60px, 340px) rotate(162deg) } 50% { transform: translate( 0px, 350px) rotate(180deg) } 55% { transform: translate( -60px, 340px) rotate(198deg) } 60% { transform: translate(-100px, 320px) rotate(216deg) } 65% { transform: translate(-130px, 290px) rotate(234deg) } 70% { transform: translate(-150px, 250px) rotate(252deg) } 75% { transform: translate(-160px, 200px) rotate(270deg) } 80% { transform: translate(-150px, 140px) rotate(288deg) } 85% { transform: translate(-130px, 90px) rotate(306deg) } 90% { transform: translate(-100px, 50px) rotate(324deg) } 95% { transform: translate( -60px, 20px) rotate(342deg) } 100% { transform: translate( 0px, 0px) rotate(360deg) } } @-webkit-keyframes round_jupiter { 0% { background-image: -webkit-linear-gradient(top, #f69, #fc0, #3c3, #09f, #96f); } 100% { background-image: -webkit-linear-gradient(top, #f69, #fc0, #3c3, #09f, #96f); } } @-moz-keyframes round_jupiter { 0% { background-image: -moz-linear-gradient(top, #f69, #fc0, #3c3, #09f, #96f); } 100% { background-image: -moz-linear-gradient(top, #f69, #fc0, #3c3, #09f, #96f); } } @-ms-keyframes round_jupiter { 0% { background-image: -ms-linear-gradient(top, #f69, #fc0, #3c3, #09f, #96f); } 100% { background-image: -ms-linear-gradient(top, #f69, #fc0, #3c3, #09f, #96f); } } @-o-keyframes round_jupiter { 0% { background-image: -o-linear-gradient(top, #f69, #fc0, #3c3, #09f, #96f); } 100% { background-image: -o-linear-gradient(top, #f69, #fc0, #3c3, #09f, #96f); } } @keyframes round_jupiter { 0% { background-image: -ms-linear-gradient(top, #f69, #fc0, #3c3, #09f, #96f); } 100% { background-image: -ms-linear-gradient(top, #f69, #fc0, #3c3, #09f, #96f); } } @-webkit-keyframes round_rainbow { 0% { background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); } 100% { background-image: -webkit-linear-gradient(top, #f69, #fc0, #3c3, #09f, #96f); } } @-moz-keyframes round_rainbow { 0% { background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); } 100% { background-image: -moz-linear-gradient(top, #f69, #fc0, #3c3, #09f, #96f); } } @-ms-keyframes round_rainbow { 0% { background-image: -ms-linear-gradient(top, #f69, #fc0, #3c3, #09f, #96f); } 100% { background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); } } @-o-keyframes round_rainbow { 0% { background-image: -o-linear-gradient(top, #f69, #fc0, #3c3, #09f, #96f); } 100% { background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); } } @keyframes round_rainbow { 0% { background-image: -ms-linear-gradient(top, #f69, #fc0, #3c3, #09f, #96f); } 100% { background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); } } @-webkit-keyframes round_ever { 0% { background-image: -webkit-linear-gradient(left, #727820, #fff, #fff, #fff, #727820); } 100% { background-image: -webkit-linear-gradient(top, #727820, #fff, #fff, #fff, #727820); } } @-moz-keyframes round_ever { 0% { background-image: -moz-linear-gradient(left, #727820, #fff, #fff, #fff, #727820); } 100% { background-image: -moz-linear-gradient(top, #727820, #fff, #fff, #fff, #727820); } } @-ms-keyframes round_ever { 0% { background-image: -ms-linear-gradient(top, #727820, #fff, #fff, #fff, #727820); } 100% { background-image: -ms-linear-gradient(left, #727820, #fff, #fff, #fff, #727820); } } @-o-keyframes round_ever { 0% { background-image: -o-linear-gradient(top, #727820, #fff, #fff, #fff, #727820); } 100% { background-image: -o-linear-gradient(left, #727820, #fff, #fff, #fff, #727820); } } @keyframes round_ever { 0% { background-image: -ms-linear-gradient(top, #727820, #fff, #fff, #fff, #727820); } 100% { background-image: -ms-linear-gradient(left, #727820, #fff, #fff, #fff, #727820); } } @-webkit-keyframes round_ever2 { 0% { background-image: -webkit-linear-gradient(left, #774027, #fff, #fff, #fff, #774027); } 100% { background-image: -webkit-linear-gradient(top, #774027, #fff, #fff, #fff, #774027); } } @-moz-keyframes round_ever2 { 0% { background-image: -moz-linear-gradient(left, #774027, #fff, #fff, #fff, #774027); } 100% { background-image: -moz-linear-gradient(top, #774027, #fff, #fff, #fff, #774027); } } @-ms-keyframes round_ever2 { 0% { background-image: -ms-linear-gradient(top, #774027, #fff, #fff, #fff, #774027); } 100% { background-image: -ms-linear-gradient(left, #774027, #fff, #fff, #fff, #774027); } } @-o-keyframes round_ever2 { 0% { background-image: -o-linear-gradient(top, #774027, #fff, #fff, #fff, #774027); } 100% { background-image: -o-linear-gradient(left, #774027, #fff, #fff, #fff, #774027); } } @keyframes round_ever2 { 0% { background-image: -ms-linear-gradient(top, #774027, #fff, #fff, #fff, #774027); } 100% { background-image: -ms-linear-gradient(left, #774027, #fff, #fff, #fff, #774027); } } @-webkit-keyframes round_sun { 0% { background-image: -webkit-linear-gradient(left, #f69, #fc0, #f40, #fc0, #f69); } 100% { background-image: -webkit-linear-gradient(top, #f69, #fc0, #f40, #fc0, #f69); } } @-moz-keyframes round_sun { 0% { background-image: -moz-linear-gradient(left, #f69, #fc0, #f40, #fc0, #f69); } 100% { background-image: -moz-linear-gradient(top, #f69, #fc0, #f40, #fc0, #f69); } } @-ms-keyframes round_sun { 0% { background-image: -ms-linear-gradient(left, #f69, #fc0, #f40, #fc0, #f69); } 100% { background-image: -ms-linear-gradient(top, #f69, #fc0, #f40, #fc0, #f69); } } @-o-keyframes round_sun { 0% { background-image: -o-linear-gradient(left, #f69, #fc0, #f40, #fc0, #f69); } 100% { background-image: -o-linear-gradient(top, #f69, #fc0, #f40, #fc0, #f69); } } @keyframes round_sun { 0% { background-image: -ms-linear-gradient(left, #f69, #fc0, #f40, #fc0, #f69); } 100% { background-image: -ms-linear-gradient(top, #f69, #fc0, #f40, #fc0, #f69); } } @-webkit-keyframes round_earth { 0% { background-image: -webkit-linear-gradient(left, #96f, #09f, #0ff, #09f, #96f); } 100% { background-image: -webkit-linear-gradient(top, #96f, #09f, #0ff, #09f, #96f); } } @-moz-keyframes round_earth { 0% { background-image: -moz-linear-gradient(left, #96f, #09f, #0ff, #09f, #96f); } 100% { background-image: -moz-linear-gradient(top, #96f, #09f, #0ff, #09f, #96f); } } @-ms-keyframes round_earth { 0% { background-image: -ms-linear-gradient(left, #96f, #09f, #0ff, #09f, #96f); } 100% { background-image: -ms-linear-gradient(top, #96f, #09f, #0ff, #09f, #96f); } } @-o-keyframes round_earth { 0% { background-image: -o-linear-gradient(left, #96f, #09f, #0ff, #09f, #96f); } 100% { background-image: -o-linear-gradient(top, #96f, #09f, #0ff, #09f, #96f); } } @keyframes round_earth { 0% { background-image: -ms-linear-gradient(left, #96f, #09f, #0ff, #09f, #96f); } 100% { background-image: -ms-linear-gradient(top, #96f, #09f, #0ff, #09f, #96f); } } @-webkit-keyframes round_moon { 0% { background-image: -webkit-linear-gradient(left, #f0e6bc, #ffd700, #B8860B, #ffd700, #f0e6bc); } 100% { background-image: -webkit-linear-gradient(top, #f0e6bc, #ffd700, #B8860B, #ffd700, #f0e6bc); } } @-moz-keyframes round_moon { 0% { background-image: -moz-linear-gradient(left, #f0e6bc, #ffd700, #B8860B, #ffd700, #f0e6bc); } 100% { background-image: -moz-linear-gradient(top, #f0e6bc, #ffd700, #B8860B, #ffd700, #f0e6bc); } } @-ms-keyframes round_moon { 0% { background-image: -ms-linear-gradient(left, #f0e6bc, #ffd700, #B8860B, #ffd700, #f0e6bc); } 100% { background-image: -ms-linear-gradient(top, #f0e6bc, #ffd700, #B8860B, #ffd700, #f0e6bc); } } @-o-keyframes round_moon { 0% { background-image: -o-linear-gradient(left, #f0e6bc, #ffd700, #B8860B, #ffd700, #f0e6bc); } 100% { background-image: -o-linear-gradient(top, #f0e6bc, #ffd700, #B8860B, #ffd700, #f0e6bc); } } @keyframes round_moon { 0% { background-image: -ms-linear-gradient(left, #f0e6bc, #ffd700, #B8860B, #ffd700, #f0e6bc); } 100% { background-image: -ms-linear-gradient(top, #f0e6bc, #ffd700, #B8860B, #ffd700, #f0e6bc); } } @-webkit-keyframes round_mercury { 0% { background-image: -webkit-linear-gradient(left, #0f0, #ffd700, #0ff, #ffd700, #0f0); } 100% { background-image: -webkit-linear-gradient(top, #0f0, #ffd700, #0ff, #ffd700, #0f0); } } @-moz-keyframes round_mercury { 0% { background-image: -moz-linear-gradient(left, #0f0, #ffd700, #0ff, #ffd700, #0f0); } 100% { background-image: -moz-linear-gradient(top, #0f0, #ffd700, #0ff, #ffd700, #0f0); } } @-ms-keyframes round_mercury { 0% { background-image: -ms-linear-gradient(left, #0f0, #ffd700, #0ff, #ffd700, #0f0); } 100% { background-image: -ms-linear-gradient(top, #f0e6bc, #ffd700, #B8860B, #ffd700, #f0e6bc); } } @-o-keyframes round_mercury { 0% { background-image: -o-linear-gradient(left, #0f0, #ffd700, #0ff, #ffd700, #0f0); } 100% { background-image: -o-linear-gradient(top, #f0e6bc, #ffd700, #B8860B, #ffd700, #f0e6bc); } } @keyframes round_mercury { 0% { background-image: -ms-linear-gradient(left, #0f0, #ffd700, #0ff, #ffd700, #0f0); } 100% { background-image: -ms-linear-gradient(top, #f0e6bc, #ffd700, #B8860B, #ffd700, #f0e6bc); } } @-webkit-keyframes comet_satellite1 { 0% { -webkit-transform: translate(-200px,-600px);} 25% { -webkit-transform: translate( 0px, 0px); } 50% { -webkit-transform: translate(200px,600px); } 75% { -webkit-transform: translate( 0px, 0px);} 100% { -webkit-transform: translate(-200px,-600px); } } @-moz-keyframes comet_satellite1 { 0% { -moz-transform: translate(-200px,-600px);} 25% { -moz-transform: translate( 0px, 0px); } 50% { -moz-transform: translate(200px,600px); } 75% { -moz-transform: translate( 0px, 0px);} 100% { -moz-transform: translate(-200px,-600px); } } @-ms-keyframes comet_satellite1 { 0% { -ms-transform: translate(-200px,-600px);} 25% { -ms-transform: translate( 0px, 0px); } 50% { -ms-transform: translate(200px,600px); } 75% { -ms-transform: translate( 0px, 0px);} 100% { -ms-transform: translate(-200px,-600px); } } @-o-keyframes comet_satellite1 { 0% { -o-transform: translate(-200px,-600px);} 25% { -o-transform: translate( 0px, 0px); } 50% { -o-transform: translate(200px,600px); } 75% { -o-transform: translate( 0px, 0px);} 100% { -o-transform: translate(-200px,-600px); } } @keyframes comet_satellite1 { 0% { -ms-transform: translate(-200px,-600px);} 25% { -ms-transform: translate( 0px, 0px); } 50% { -ms-transform: translate(200px,600px); } 75% { -ms-transform: translate( 0px, 0px);} 100% { -ms-transform: translate(-200px,-600px); } } @-webkit-keyframes comet_satellite2 { 0% { -webkit-transform: translate(600px,200px);} 25% { -webkit-transform: translate( 0px, 0px); } 50% { -webkit-transform: translate(-600px,-300px); } 75% { -webkit-transform: translate( 0px, 0px);} 100% { -webkit-transform: translate(600px,200px); } } @-moz-keyframes comet_satellite2 { 0% { -moz-transform: translate(600px,200px);} 25% { -moz-transform: translate( 0px, 0px); } 50% { -moz-transform: translate(-600px,-300px); } 75% { -moz-transform: translate( 0px, 0px);} 100% { -moz-transform: translate(600px,200px); } } @-ms-keyframes comet_satellite2 { 0% { -ms-transform: translate(600px,200px);} 25% { -ms-transform: translate( 0px, 0px); } 50% { -ms-transform: translate(-600px,-300px); } 75% { -ms-transform: translate( 0px, 0px);} 100% { -ms-transform: translate(600px,200px); } } @-o-keyframes comet_satellite2 { 0% { -o-transform: translate(600px,200px);} 25% { -o-transform: translate( 0px, 0px); } 50% { -o-transform: translate(-600px,-300px); } 75% { -o-transform: translate( 0px, 0px);} 100% { -o-transform: translate(600px,200px); } } @keyframes comet_satellite2 { 0% { -ms-transform: translate(600px,200px);} 25% { -ms-transform: translate( 0px, 0px); } 50% { -ms-transform: translate(-600px,-300px); } 75% { -ms-transform: translate( 0px, 0px);} 100% { -ms-transform: translate(600px,200px); } } @-webkit-keyframes comet_satellite3 { 0% { -webkit-transform: translate(-1000px,400px);} 25% { -webkit-transform: translate(0px, 400px); } 50% { -webkit-transform: translate(1000px, 400px); } 75% { -webkit-transform: translate(0px, 400px);} 100% { -webkit-transform: translate(-1000px,400px); } } @-moz-keyframes comet_satellite3 { 0% { -moz-transform: translate(-1000px,400px);} 25% { -moz-transform: translate(0px, 400px); } 50% { -moz-transform: translate(1000px, 400px); } 75% { -moz-transform: translate(0px, 400px);} 100% { -moz-transform: translate(-1000px,400px); } } @-ms-keyframes comet_satellite3 { 0% { -ms-transform: translate(-1000px,400px);} 25% { -ms-transform: translate(0px, 400px); } 50% { -ms-transform: translate(1000px, 400px); } 75% { -ms-transform: translate(0px, 400px);} 100% { -ms-transform: translate(-1000px,400px); } } @-o-keyframes comet_satellite3 { 0% { -o-transform: translate(-1000px,400px);} 25% { -o-transform: translate(0px, 400px); } 50% { -o-transform: translate(1000px, 400px); } 75% { -o-transform: translate(0px, 400px);} 100% { -o-transform: translate(-1000px,400px); } } @keyframes comet_satellite3 { 0% { -ms-transform: translate(-1000px,400px);} 25% { -ms-transform: translate(0px, 400px); } 50% { -ms-transform: translate(1000px, 400px); } 75% { -ms-transform: translate(0px, 400px);} 100% { -ms-transform: translate(-1000px,400px); } } @-webkit-keyframes comet_satellite4 { 0% { -webkit-transform: translate(1000px,0px);} 25% { -webkit-transform: translate(200px, 400px); } 50% { -webkit-transform: translate(0px, 600px); } 75% { -webkit-transform: translate(200px, 400px);} 100% { -webkit-transform: translate(1000px,0px); } } @-moz-keyframes comet_satellite4 { 0% { -moz-transform: translate(1000px,0px);} 25% { -moz-transform: translate(200px, 400px); } 50% { -moz-transform: translate(0px, 600px); } 75% { -moz-transform: translate(200px, 400px);} 100% { -moz-transform: translate(1000px,0px); } } @-ms-keyframes comet_satellite4 { 0% { -ms-transform: translate(1000px,0px);} 25% { -ms-transform: translate(200px, 400px); } 50% { -ms-transform: translate(0px, 600px); } 75% { -ms-transform: translate(200px, 400px);} 100% { -ms-transform: translate(1000px,0px); } } @-o-keyframes comet_satellite4 { 0% { -o-transform: translate(1000px,0px);} 25% { -o-transform: translate(200px, 400px); } 50% { -o-transform: translate(0px, 600px); } 75% { -o-transform: translate(200px, 400px);} 100% { -o-transform: translate(1000px,0px); } } @keyframes comet_satellite4 { 0% { -ms-transform: translate(1000px,0px);} 25% { -ms-transform: translate(200px, 400px); } 50% { -ms-transform: translate(0px, 600px); } 75% { -ms-transform: translate(200px, 400px);} 100% { -ms-transform: translate(1000px,0px); } } @-webkit-keyframes round_satellite { 0% { -webkit-transform: translate(0px,0px) scale(0.1,0.1);} 50% { -webkit-transform: translate(100px,100px) scale(0.5,0.5); } 75% { -webkit-transform: translate(0px,200px) scale(0.8,0.8);} 100% { -webkit-transform: translate(-800px,400px) scale(1.5,1.5); } } @-moz-keyframes round_satellite { 0% { -moz-transform: translate(0px,0px) scale(0.1,0.1);} 50% { -moz-transform: translate(100px,100px) scale(0.5,0.5); } 75% { -moz-transform: translate(0px,200px) scale(0.8,0.8); } 100% { -moz-transform: translate(-800px,400px) scale(1.5,1.5); } } @-ms-keyframes round_satellite { 0% { -ms-transform: translate(0px,0px) scale(0.1,0.1);} 50% { -ms-transform: translate(100px,100px) scale(0.5,0.5); } 75% { -ms-transform: translate(0px,200px) scale(0.8,0.8); } 100% { -ms-transform: translate(-800px,400px) scale(1.5,1.5); } } @-o-keyframes round_satellite { 0% { -o-transform: translate(0px,0px) scale(0.1,0.1);} 50% { -o-transform: translate(100px,100px) scale(0.5,0.5); } 75% { -o-transform: translate(0px,200px) scale(0.8,0.8); } 100% { -o-transform: translate(-800px,400px) scale(1.5,1.5); } } @keyframes round_satellite { 0% { -ms-transform: translate(0px,0px) scale(0.1,0.1);} 50% { -ms-transform: translate(100px,100px) scale(0.5,0.5); } 75% { -ms-transform: translate(0px,200px) scale(0.8,0.8); } 100% { -ms-transform: translate(-800px,400px) scale(1.5,1.5); } } @-webkit-keyframes launcher { 0% { -webkit-transform: translate(0px,0px) rotate(-180deg) scale(0.2,0.2);} 100% { -webkit-transform: translate(1000px,150px) rotate(-180deg) scale(1.0,1.0); } } @-moz-keyframes launcher { 0% { -moz-transform: translate(0px,0px) rotate(-180deg) scale(0.2,0.2);} 100% { -moz-transform: translate(1000px,150px) rotate(-180deg) scale(1.0,1.0); } } @-ms-keyframes launcher { 0% { -ms-transform: translate(0px,0px) rotate(-180deg) scale(0.2,0.2);} 100% { -ms-transform: translate(1000px,150px) rotate(-180deg) scale(1.0,1.0); } } @-o-keyframes launcher { 0% { -o-transform: translate(0px,0px) rotate(-180deg) scale(0.2,0.2);} 100% { -o-transform: translate(1000px,150px) rotate(-180deg) scale(1.0,1.0); } } @keyframes launcher { 0% { -ms-transform: translate(0px,0px) rotate(-180deg) scale(0.2,0.2);} 100% { -ms-transform: translate(1000px,150px) rotate(-180deg) scale(1.0,1.0); } } @-webkit-keyframes cloudMove { 0% {background-position: 0 0, 0 0;} 100% {background-position: 400px 0, 800px 0;} } @-moz-keyframes cloudMove { 0% {background-position: 0 0, 0 0;} 100% {background-position: 400px 0, 800px 0;} } @-ms-keyframes cloudMove { 0% {background-position: 0 0, 0 0;} 100% {background-position: 400px 0, 800px 0;} } @-o-keyframes cloudMove { 0% {background-position: 0 0, 0 0;} 100% {background-position: 400px 0, 800px 0;} } @keyframes cloudMove { 0% {background-position: 0 0, 0 0;} 100% {background-position: 400px 0, 800px 0;} } @-webkit-keyframes cloudMove2 { 0% {background-position: 0 400px, 0 800px;} 100% {background-position: 0 0, 0 0;} } @-moz-keyframes cloudMove2 { 0% {background-position: 0 400px, 0 800px;} 100% {background-position: 0 0, 0 0;} } @-ms-keyframes cloudMove2 { 0% {background-position: 0 400px, 0 800px;} 100% {background-position: 0 0, 0 0;} } @-o-keyframes cloudMove2 { 0% {background-position: 0 400px, 0 800px;} 100% {background-position: 0 0, 0 0;} } @keyframes cloudMove2 { 0% {background-position: 0 400px, 0 800px;} 100% {background-position: 0 0, 0 0;} } @-webkit-keyframes cloudMove3 { 0% {background-position: 400px 0, 800px 0;} 100% {background-position: 0 0, 0 0;} } @-moz-keyframes cloudMove3 { 0% {background-position: 400px 0, 800px 0;} 100% {background-position: 0 0, 0 0;} } @-ms-keyframes cloudMove3 { 0% {background-position: 400px 0, 800px 0;} 100% {background-position: 0 0, 0 0;} } @-o-keyframes cloudMove3 { 0% {background-position: 400px 0, 800px 0;} 100% {background-position: 0 0, 0 0;} } @keyframes cloudMove3 { 0% {background-position: 400px 0, 800px 0;} 100% {background-position: 0 0, 0 0;} } @-webkit-keyframes cloudMove4 { 0% {background-position: 0 0, 0 0;} 100% {background-position: 0 400px, 0 800px;} } @-moz-keyframes cloudMove4 { 0% {background-position: 0 0, 0 0;} 100% {background-position: 0 400px, 0 800px;} } @-ms-keyframes cloudMove4 { 0% {background-position: 0 0, 0 0;} 100% {background-position: 0 400px, 0 800px;} } @-o-keyframes cloudMove4 { 0% {background-position: 0 0, 0 0;} 100% {background-position: 0 400px, 0 800px;} } @keyframes cloudMove4 { 0% {background-position: 0 0, 0 0;} 100% {background-position: 0 400px, 0 800px;} } @-webkit-keyframes cloudMove5 { 0% {background-position: 0 400px, 800px 0;} 100% {background-position: 400px 0, 0 800px;} } @-moz-keyframes cloudMove5 { 0% {background-position: 0 400px, 800px 0;} 100% {background-position: 400px 0, 0 800px;} } @-ms-keyframes cloudMove5 { 0% {background-position: 0 400px, 800px 0;} 100% {background-position: 400px 0, 0 800px;} } @-o-keyframes cloudMove5 { 0% {background-position: 0 400px, 800px 0;} 100% {background-position: 400px 0, 0 800px;} } @keyframes cloudMove5 { 0% {background-position: 0 400px, 800px 0;} 100% {background-position: 400px 0, 0 800px;} }