.animated {
animation-duration: 0.8s;
animation-timing-function: ease-out;
animation-fill-mode: both;
} .animated:not(.is-inview) {
opacity: 0;
}
.animated.is-inview.fadeIn {
animation-name: tf-fadeIn;
}
.animated.is-inview.fadeInUp {
animation-name: tf-fadeInUp;
}
.animated.is-inview.fadeInDown {
animation-name: tf-fadeInDown;
}
.animated.is-inview.fadeInLeft {
animation-name: tf-fadeInLeft;
}
.animated.is-inview.fadeInRight {
animation-name: tf-fadeInRight;
}
.animated.delay-100ms { animation-delay: 0.1s; }
.animated.delay-200ms { animation-delay: 0.2s; }
.animated.delay-300ms { animation-delay: 0.3s; }
.animated.delay-500ms { animation-delay: 0.5s; } @keyframes tf-fadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes tf-fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes tf-fadeInDown {
from { opacity: 0; transform: translateY(-30px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes tf-fadeInLeft {
from { opacity: 0; transform: translateX(-30px); }
to   { opacity: 1; transform: translateX(0); }
}
@keyframes tf-fadeInRight {
from { opacity: 0; transform: translateX(30px); }
to   { opacity: 1; transform: translateX(0); }
}