.animate__up { animation-duration: .3s; animation-name: staggerItems; animation-timing-function: ease-out; } @keyframes staggerItems { 0% { -webkit-transform: translateY(30px); transform: translateY(30px) } } .spin { animation: spin 2s infinite linear } @keyframes spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(359deg) } } .animate-fading { animation: fading 10s infinite } @keyframes fading { 0% { opacity: 0 } 50% { opacity: 1 } 100% { opacity: 0 } } .animate-fading2 { animation: fading 2s infinite } @keyframes fading { 0% { opacity: 0 } 50% { opacity: 1 } 100% { opacity: 0 } } .animate-opacity { animation: opac 0.8s } @keyframes opac { from { opacity: 0 } to { opacity: 1 } } .animate-top { position: relative; animation: animatetop 0.4s } @keyframes animatetop { from { top: -300px; opacity: 0 } to { top: 0; opacity: 1 } } .animate2-top10 { position: relative; animation: animatetop 0.2s } @keyframes animatetop { from { top: -10px; opacity: 0 } to { top: 0; opacity: 1 } } .animate-left { position: relative; animation: animateleft 0.4s } @keyframes animateleft { from { left: -300px; opacity: 0 } to { left: 0; opacity: 1 } } .animate-right { position: relative; animation: animateright 0.4s } @keyframes animateright { from { right: -300px; opacity: 0 } to { right: 0; opacity: 1 } } .animate-bottom { position: relative; animation: animatebottom 0.4s } @keyframes animatebottom { from { bottom: -300px; opacity: 0 } to { bottom: 0; opacity: 1 } } .animate-bottom50 { position: relative; animation: animatebottom 0.4s } @keyframes animatebottom { from { bottom: -50px; opacity: 0 } to { bottom: 0; opacity: 1 } }