Micro Animations

/*** 
Custom Micro Animations
=========================================================== ***/

/* Avoid FUC on frontend */
.bricks-is-frontend .animation-trigger{
  opacity:0;
}

.animation-trigger {
    --delay: attr(data-delay number);
}
 
/* Animated Class*/
.animate {
    animation-name: fadeAnimation;
    animation-delay: calc(var(--delay, 1) * 200ms);
    animation-duration: var(--duration, 600ms);
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
 
/* Change translate Origin */
.animation--left-to-right {
  --translate: -40px,0,0;
}
.animation--right-to-left {
  --translate: 40px,0,0;
}
.animation--top-to-bottom {
  --translate: 0,-40px,0;
}
.animation--bottom-to-top {
  --translate: 0,40px,0;
}
 
/* Keyframes */
@keyframes fadeAnimation{
  from{
    transform: translate3d(var(--translate));
  }
  to{
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}