:root body .wp-site-blocks .animate-slide-from-top {
position: relative;
transform: translateY(-40px);
opacity: 0;
}
:root body .animate-slide-from-top.animated {
transform: translateY(0px);
animation: slideFromTop;
animation-duration: .5s;
animation-timing-function: ease-in-out;
animation-delay: .3s;
animation-fill-mode: both;
}
@keyframes slideFromTop {
0% {
transform: translateY(-40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
} :root body .wp-site-blocks .animate-slide-from-right {
position: relative;
transform: translateX(40px);
opacity: 0;
}
:root body .animate-slide-from-right.animated {
transform: translateX(0px);
animation: slideFromRight;
animation-duration: .5s;
animation-timing-function: ease-in-out;
animation-delay: .3s;
animation-fill-mode: both;
}
@keyframes slideFromRight {
0% {
transform: translateX(40px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
} :root body .wp-site-blocks .animate-slide-from-bottom {
position: relative;
transform: translateY(40px);
opacity: 0;
transition: 1s ease-in-out;
}
:root body .animate-slide-from-bottom.animated {
transform: translateY(0px) ;
animation: slideFromBottom;
animation-duration: .5s;
animation-timing-function: ease-in-out;
animation-delay: .3s;
animation-fill-mode: both;
}
@keyframes slideFromBottom {
0% {
transform: translateY(40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
} :root body .wp-site-blocks .animate-slide-from-left {
position: relative;
transform: translateX(-40px);
opacity: 0;
}
:root body .animate-slide-from-left.animated {
transform: translateX(0px);
animation: slideFromLeft;
animation-duration: .5s;
animation-timing-function: ease-in-out;
animation-delay: .2s;
animation-fill-mode: both;
}
@keyframes slideFromLeft {
0% {
transform: translateX(-40px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}