@import "../settings/_mixins";
@import "../settings/_variables";

.dnetor-image-wrapper {
    --dnetor-image-duration: 2000ms;
    --dnetor-image-jump-top: 3%;
    --dnetor-image-jump-left: 3%;
    .dnetor-image-spin {
        animation-name: imageSpin;
        animation-duration: var(--dnetor-image-duration);
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    .dnetor-image-spin {
        animation-name: imageSpin;
        animation-duration: var(--dnetor-image-duration);
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    .dnetor-jump-postion-top{
        animation: imageJumpTop var(--dnetor-image-duration) infinite ease-in-out alternate;
    }
    .dnetor-jump-postion-left{
        animation: imageJumpLeft var(--dnetor-image-duration) infinite ease-in-out alternate;
    }
}

@keyframes imageJumpLeft {
    0% {
        @include transform(translateX(0));

    }
    100% {
        @include transform(translateX(var(--dnetor-image-jump-left)));
    }
}

@keyframes imageJumpTop {
    0% {
        @include transform(translateY(0));
    }
    100% {
        @include transform(translateY(var(--dnetor-image-jump-top)));
    }
}

@keyframes imageSpin {
    from {
        @include transform(rotate(0));
    }
    to {
        @include transform(rotate(360deg));
    }
}