/** * @copyright 2014 by Tobias Reich */ /* Animation Setter ------------------------------------------------*/ .fadeIn { animation-name: fadeIn; animation-duration: .3s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); } .fadeOut { animation-name: fadeOut; animation-duration: .3s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); } .contentZoomIn { animation-name: zoomIn; animation-duration: .2s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.51,.92,.24,1); } .contentZoomOut { animation-name: zoomOut; animation-duration: .2s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.51,.92,.24,1); } /* moveUp ------------------------------------------------*/ @keyframes moveUp { 0% { transform: translateY(100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } /* fadeIn ------------------------------------------------*/ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* fadeOut ------------------------------------------------*/ @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* moveBackground ------------------------------------------------*/ @keyframes moveBackground { 0% { background-position-x: 0px; } 100% { background-position-x: -100px; } } /* zoomIn ------------------------------------------------*/ @keyframes zoomIn { 0% { opacity: 0; transform: scale(.8); } 100% { opacity: 1; transform: scale(1); } } /* zoomOut ------------------------------------------------*/ @keyframes zoomOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.8); } } /* popIn ------------------------------------------------*/ @keyframes popIn { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } /* pulse ------------------------------------------------*/ @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }