:root { --animate-duration: 1s; } .animate__animated { animation-duration: var(--animate-duration); animation-fill-mode: both; } .animate__faster { animation-duration: calc(var(--animate-duration) / 2); } @keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } .animate__fadeIn { animation-name: fadeIn; } @keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } .animate__fadeOut { animation-name: fadeOut; } @keyframes heartBeat { 0% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70% { transform: scale(1); } } .animate__heartBeat { animation-name: heartBeat; animation-duration: calc(var(--animate-duration) * 1.3); animation-timing-function: ease-in-out; }