.react-image {
position: relative;
width: 100%;
height: 100%;
}
.react-image.yes .veritcal {
animation-name: veritcal;
animation-timing-function: linear;
animation-duration: 12s;
animation-iteration-count: infinite;
}
@keyframes veritcal {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, 30px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
.react-image.yes .veritcal_two {
animation-name: veritcal_two;
animation-timing-function: linear;
animation-duration: 12s;
animation-iteration-count: infinite;
}
@keyframes veritcal_two {
0% {
transform: translateY(100px);
}
50% {
transform: translateY(0);
}
100% {
transform: translateY(100px);
}
}
.react-image.yes .horizontal {
animation-name: horizontal;
animation-timing-function: linear;
animation-duration: 12s;
animation-iteration-count: infinite;
}
@keyframes horizontal {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0);
}
}
.react-image.yes .rotated_style {
animation: rotate1 30s linear infinite;
-webkit-animation: rotate1 30s linear infinite;
}
@keyframes rotate1 {
from {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
.image-rotate {
animation: rotation infinite 14s linear;
} @keyframes rotation {
to {
transform: rotate(360deg);
}
}