@media (prefers-reduced-motion: no-preference) {
[data-animation].fwp-animated {
animation-play-state: running;
}
[data-animation].fwp-animated [data-animation] {
animation-play-state: running;
}
[data-animation="slideInFromLeft"] {
animation-name: slideInFromLeft;
animation-play-state: paused;
animation-fill-mode: both;
}
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(0);
}
}
[data-animation="slideInFromRight"] {
animation-name: slideInFromRight;
animation-play-state: paused;
animation-fill-mode: both;
}
@keyframes slideInFromRight {
0% {
transform: translateX(100%);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(0);
}
}
[data-animation="slideInFromBottom"] {
animation-name: slideInFromBottom;
animation-play-state: paused;
animation-fill-mode: both;
}
@keyframes slideInFromBottom {
0% {
transform: translateY(15vh);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateY(0);
}
}
[data-animation="rollDown"] {
animation-name: rollDown;
animation-play-state: paused;
animation-fill-mode: both;
overflow-y: hidden;
}
@keyframes rollDown {
0% {
max-height: 0px;
}
99% {
max-height: 100vh;
}
100% {
max-height: 100%;
}
}
[data-animation="zoomIn"] {
animation-name: zoomIn;
animation-play-state: paused;
animation-fill-mode: both;
}
@keyframes zoomIn {
0% {
transform: scale(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1);
}
}
[data-animation="fadeIn"] {
animation-name: fadeIn;
animation-play-state: paused;
animation-fill-mode: both;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
[data-animation="custom"] {
animation: custom;
animation-fill-mode: both;
}
@keyframes custom {
0% {
transform: translate(0)
}
100% {
transform: translate(0, 100px)
}
}
[data-animation="transitionGrow"]:hover {
transform: scale(1.1);
}
[data-animation="transitionFlip"]:hover {
transform: rotateY(180deg);
}
}