.react-image {
    position: relative;
    width: 100%;
    height: 100%; 
    &.yes {
        .veritcal {
            animation-name: veritcal;
            animation-timing-function: linear;
            animation-duration: 12s;
            animation-iteration-count: infinite;
            position: absolute;
            right: 0;
            top: -150px;
        }

        @keyframes veritcal {
          0% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
          }
          50% {
            -webkit-transform: translate3d(0, 30px, 0);
            transform: translate3d(0, 30px, 0);
          }
          100% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
          }
        }

        .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);
            }
        }

        .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);
            }
        }

        .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);
            }
        }

        @-webkit-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;
}

/* Rotation frame*/
@keyframes rotation {
    to {
        transform: rotate(360deg);
    }
}