.fadeIn{ animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; visibility: visible !important; } @keyframes fadeIn { 0% { transform: scale(1); opacity: 0.0; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn { 0% { -webkit-transform: scale(1); opacity: 0.0; } 100% { -webkit-transform: scale(1); opacity: 1; } } .slideUp{ animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-timing-function: ease; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -ms-animation-fill-mode:forwards; animation-fill-mode:forwards; visibility: visible !important; } @keyframes slideUp { 0% { opacity: 0; visibility: hidden; transform: translateY(10%); } 100% { opacity: 1; visibility: visible; transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { opacity: 0; visibility: hidden; -webkit-transform: translateY(10%); } 100% { opacity: 1; visibility: visible; -webkit-transform: translateY(0%); } } .slideDown{ animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideDown { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0%); } } @-webkit-keyframes slideDown { 0% { opacity: 0; -webkit-transform: translateY(-100%); } 100% { opacity: 1; -webkit-transform: translateY(0%); } } .bigEntrance{ animation-name: bigEntrance; -webkit-animation-name: bigEntrance; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes bigEntrance { 0% { transform: scale(0.5); opacity: 0.5; } 30% { transform: scale(1.03); opacity: 1 !important; } 45% { transform: scale(0.98); opacity: 1 !important; } 60% { transform: scale(1.01); opacity: 1 !important; } 100% { transform: scale(1); opacity: 1 !important; } } @-webkit-keyframes bigEntrance { 0% { -webkit-transform: scale(0.5); opacity: 0.5; } 30% { -webkit-transform: scale(1.03); opacity: 1 !important; } 45% { -webkit-transform: scale(0.98); opacity: 1 !important; } 60% { -webkit-transform: scale(1.01); opacity: 1 !important; } 100% { -webkit-transform: scale(1); opacity: 1 !important; } } .slideLeft{ animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideLeft { 0% { transform: translateX(10%); opacity: 0; } 100% { transform: translateX(0%); opacity: 1 !important; } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(10%); opacity: 0; } 100% { -webkit-transform: translateX(0%); opacity: 1 !important; } } .slideRight{ animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideRight { 0% { opacity: 0; transform: translateX(-10%); } 100% { transform: translateX(0%); opacity: 1 !important; } } @-webkit-keyframes slideRight { 0% { opacity: 0; -webkit-transform: translateX(-10%); } 100% { -webkit-transform: translateX(0%); opacity: 1 !important; } }