[data-anim-action] {
transition-property: all;
transition-duration: 200ms;
transition-timing-function: ease;
}
@media (prefers-reduced-motion) {
[data-anim-action] {
transition-property: none !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
} [data-anim-event="whileScroll"] {
transition-duration: 200ms;
transition-delay: 0s;
} [data-anim-event="onScroll"][data-anim-triggered="false"][data-anim-reverse="false"] {
transition-duration: 0s !important;
transition-delay: 0s !important;
} [data-anim-action="changeColor"] {
transition-property: color, background;
} [data-anim-action="translateX"],
[data-anim-action="translateY"],
[data-anim-action="scale"],
[data-anim-action="rotate"] {
transition-property: transform;
} [data-anim-action="filter"] {
transition-property: filter;
}  [data-anim-action="show"] {
opacity: 0;
transition: none;
}
[data-anim-action="show"][data-anim-triggered="true"],
[data-anim-action="show"][data-anim-event="hover"]:hover {
opacity: 1;
} [data-anim-action="hide"] {
transition: none;
}
[data-anim-action="hide"][data-anim-triggered="true"],
[data-anim-action="hide"][data-anim-event="hover"]:hover {
opacity: 0;
} [data-anim-action="fadeIn"] {
opacity: 0;
transition-property: opacity;
}
[data-anim-action="fadeIn"][data-anim-triggered="true"],
[data-anim-action="fadeIn"][data-anim-event="hover"]:hover {
opacity: 1;
} [data-anim-action="fadeInUp"] {
opacity: 0;
transform: translateY(100px);
transition-property: opacity, transform;
}
[data-anim-action="fadeInUp"][data-anim-triggered="true"],
[data-anim-action="fadeInUp"][data-anim-event="hover"]:hover {
opacity: 1;
transform: translateY(0);
} [data-anim-action="fadeInDown"] {
opacity: 0;
transform: translateY(-100px);
transition-property: opacity, transform;
}
[data-anim-action="fadeInDown"][data-anim-triggered="true"],
[data-anim-action="fadeInDown"][data-anim-event="hover"]:hover {
opacity: 1;
transform: translateY(0);
} [data-anim-action="fadeInRight"] {
opacity: 0;
transform: translateX(100px);
transition-property: opacity, transform;
}
[data-anim-action="fadeInRight"][data-anim-triggered="true"],
[data-anim-action="fadeInRight"][data-anim-event="hover"]:hover {
opacity: 1;
transform: translateX(0);
} [data-anim-action="fadeInLeft"] {
opacity: 0;
transform: translateX(-100px);
transition-property: opacity, transform;
}
[data-anim-action="fadeInLeft"][data-anim-triggered="true"],
[data-anim-action="fadeInLeft"][data-anim-event="hover"]:hover {
opacity: 1;
transform: translateX(0);
} [data-anim-action="fadeOut"] {
transition-property: opacity;
}
[data-anim-action="fadeOut"][data-anim-triggered="true"],
[data-anim-action="fadeOut"][data-anim-event="hover"]:hover {
opacity: 0;
} [data-anim-action="fadeOutUp"] {
transition-property: opacity, transform;
}
[data-anim-action="fadeOutUp"][data-anim-triggered="true"],
[data-anim-action="fadeOutUp"][data-anim-event="hover"]:hover {
transform: translateY(-100px);
opacity: 0;
} [data-anim-action="fadeOutDown"] {
transition-property: opacity, transform;
}
[data-anim-action="fadeOutDown"][data-anim-triggered="true"],
[data-anim-action="fadeOutDown"][data-anim-event="hover"]:hover {
transform: translateY(100px);
opacity: 0;
} [data-anim-action="fadeOutRight"] {
transition-property: opacity, transform;
}
[data-anim-action="fadeOutRight"][data-anim-triggered="true"],
[data-anim-action="fadeOutRight"][data-anim-event="hover"]:hover {
transform: translateX(100px);
opacity: 0;
} [data-anim-action="fadeOutLeft"] {
transition-property: opacity, transform;
}
[data-anim-action="fadeOutLeft"][data-anim-triggered="true"],
[data-anim-action="fadeOutLeft"][data-anim-event="hover"]:hover {
transform: translateX(-100px);
opacity: 0;
}