/** * @name animations.css * @author Philipp Maurer * @author Tobias Reich * @copyright 2013 by Philipp Maurer, Tobias Reich */ /* bounceInDown ------------------------------------------------*/ @-webkit-keyframes bounceInDown { 0% { -webkit-transform: translateY(-2000px); } 60% { -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInDown { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes bounceInDown { 0% { -ms-transform: translateY(-2000px); } 60% { -ms-transform: translateY(30px); } 80% { -ms-transform: translateY(-10px); } 100% { -ms-transform: translateY(0); } } @-o-keyframes bounceInDown { 0% { -o-transform: translateY(-2000px); } 60% { -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInDown { 0% { transform: translateY(-2000px); } 60% { transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } } /* bounceOutUp ------------------------------------------------*/ @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); } 20% { -webkit-transform: translateY(20px); } 100% { -webkit-transform: translateY(-2000px); } } @-moz-keyframes bounceOutUp { 0% { opacity: 1; } 100% { opacity: 0; } } @-ms-keyframes bounceOutUp { 0% { -ms-transform: translateY(0); } 20% { -ms-transform: translateY(20px); } 100% { -ms-transform: translateY(-2000px); } } @-o-keyframes bounceOutUp { 0% { -o-transform: translateY(0); } 20% { -o-transform: translateY(20px); } 100% { -o-transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { transform: translateY(0); } 20% { transform: translateY(20px); } 100% { transform: translateY(-2000px); } } /* moveUp ------------------------------------------------*/ @-webkit-keyframes moveUp { 0% { -webkit-transform: translateY(1000px); } 100% { -webkit-transform: translateY(0px); } } @-moz-keyframes moveUp { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes moveUp { 0% { -ms-transform: translateY(1000px); } 100% { -ms-transform: translateY(0px); } } @-o-keyframes moveUp { 0% { -o-transform: translateY(1000px); } 100% { -o-transform: translateY(0px); } } @keyframes moveUp { 0% { transform: translateY(1000px); } 100% { transform: translateY(0px); } } /* moveDown ------------------------------------------------*/ @-webkit-keyframes moveDown { 0% { -webkit-transform: translateY(-100px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes moveDown { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes moveDown { 0% { -ms-transform: translateY(-100px); } 100% { -ms-transform: translateY(0); } } @-o-keyframes moveDown { 0% { -o-transform: translateY(-100px); } 100% { -o-transform: translateY(0); } } @keyframes moveDown { 0% { transform: translateY(-100px); } 100% { transform: translateY(0); } } /* fadeIn ------------------------------------------------*/ @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* fadeOut ------------------------------------------------*/ @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-ms-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* moveBackground ------------------------------------------------*/ @-webkit-keyframes moveBackground { 0% { background-position-x: 0px; } 100% { background-position-x: -33px; } } @-moz-keyframes moveBackground { 0% { background-position-x: 0px; } 100% { background-position-x: -33px; } } @-ms-keyframes moveBackground { 0% { background-position-x: 0px; } 100% { background-position-x: -33px; } } @-o-keyframes moveBackground { 0% { background-position-x: 0px; } 100% { background-position-x: -33px; } } @keyframes moveBackground { 0% { background-position-x: 0px; } 100% { background-position-x: -33px; } } /* zoomOut ------------------------------------------------*/ @-webkit-keyframes zoomOut { 0% { opacity: 1; -webkit-transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(.5); } } @-moz-keyframes zoomOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-ms-keyframes zoomOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes zoomOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.5); } } /* zoomIn ------------------------------------------------*/ @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale(.5); } 100% { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes zoomIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes zoomIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes zoomIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; transform: scale(.5); } 100% { opacity: 1; transform: scale(1); } } /* pulse ------------------------------------------------*/ @-webkit-keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } } @-moz-keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } @-ms-keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } @-o-keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } }