.anim-scale-in { animation-name: scale-in; animation-duration: var(--animation-duration, 0.15s); animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5); } @keyframes scale-in { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } .anim-scale-out { -webkit-animation: scale-out-center var(--animation-duration, 0.15s) cubic-bezier(0.2, 0, 0.13, 1.5); animation: scale-out-center var(--animation-duration, 0.15s) cubic-bezier(0.2, 0, 0.13, 1.5); } @-webkit-keyframes scale-out-center { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; } } @keyframes scale-out-center { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; } } .anim-fade-in { -webkit-animation: fade-in 0.15s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: fade-in 0.15s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .anim-fade-in-top { -webkit-animation: fade-in-top 0.15s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: fade-in-top 0.15s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; } @-webkit-keyframes fade-in-top { 0% { -webkit-transform: translateY(-50px); transform: translateY(-50px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in-top { 0% { -webkit-transform: translateY(-50px); transform: translateY(-50px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .anim-fade-out { -webkit-animation: fade-out 0.15s ease-out both; animation: fade-out 0.15s ease-out both; } @-webkit-keyframes fade-out{0%{opacity:1}100%{opacity:0}}@keyframes fade-out{0%{opacity:1}100%{opacity:0}} .anim-fade-out-top{-webkit-animation:fade-out-top .15s cubic-bezier(.25,.46,.45,.94) both;animation:fade-out-top .15s cubic-bezier(.25,.46,.45,.94) both} @-webkit-keyframes fade-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}}@keyframes fade-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}}