@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-50%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; transform: translate3d(50%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes fadeOutRight { from { opacity: 0; transform: translate3d(0, 0, 0); } to { opacity: 1; transform: translate3d(120%, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -50%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .animate-fade-in-up { animation-name: fadeInUp; animation-duration: 0.5s; animation-fill-mode: both; } .animate-fade-in-down { animation-name: fadeInDown; animation-duration: 0.5s; animation-fill-mode: both; } .animate-fade-in-left { animation-name: fadeInLeft; animation-duration: 0.5s; animation-fill-mode: both; } .animate-fade-in-right { animation-name: fadeInRight; animation-duration: 0.5s; animation-fill-mode: both; } .animate-fade-out-right { animation-name: fadeOutRight; animation-duration: 0.5s; animation-fill-mode: both; } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } .delay-600 { animation-delay: 0.6s; } .delay-700 { animation-delay: 0.7s; } .highlightContent { .multipleLineEllipsis(2); em { color: red; font-style: normal; } }