@keyframes toggler {
    0%,10% {
        background-position: 0 0,0 calc(100%/3)
    }

    50% {
        background-position: 0 0,calc(100%/3) calc(100%/3)
    }

    90%,to {
        background-position: 0 0,calc(100%/3) 0
    }
}

@keyframes sticky {
    0% {
        top: -100px
    }

    to {
        top: 0
    }
}

@keyframes rotated_circle {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(-1turn)
    }
}

@keyframes rotated_circle_reverse {
    0% {
        transform: rotate(-1turn)
    }

    to {
        transform: rotate(0deg)
    }
}

@keyframes semi_rotated {
    0%,to {
        transform: rotate(8deg)
    }

    50% {
        transform: rotate(-8deg)
    }
}

@keyframes semi_rotated_two {
    0%,to {
        transform: rotate(-30deg)
    }

    50% {
        transform: rotate(30deg)
    }
}

@keyframes move_arround {
    0% {
        top: 20px;
        left: 20px
    }

    25% {
        top: 20px;
        left: -20px
    }

    50% {
        top: -20px;
        left: -20px
    }

    75% {
        top: -20px;
        left: 20px
    }

    to {
        top: 20px;
        left: 20px
    }
}

@keyframes upDownLeft {
    0%,to {
        transform: translate(0)
    }

    25%,75% {
        transform: translateY(50px)
    }

    50% {
        transform: translate(-50px,50px)
    }
}

@keyframes shapeAnimationOne {
    0% {
        transform: translate(0) rotate(0deg)
    }

    25% {
        transform: translateY(150px) rotate(90deg)
    }

    50% {
        transform: translate(150px,150px) rotate(180deg)
    }

    75% {
        transform: translate(150px) rotate(270deg)
    }

    to {
        transform: translate(0) rotate(1turn)
    }
}

@keyframes shapeAnimationTwo {
    0% {
        transform: translate(0) rotate(0deg)
    }

    25% {
        transform: translate(-150px) rotate(270deg)
    }

    50% {
        transform: translate(-150px,150px) rotate(180deg)
    }

    75% {
        transform: translateY(150px) rotate(90deg)
    }

    to {
        transform: translate(0) rotate(1turn)
    }
}

@keyframes shapeAnimationThree {
    0% {
        transform: translate(0) rotate(0deg)
    }

    25% {
        transform: translate(50px,150px) rotate(90deg)
    }

    50% {
        transform: translate(150px,150px) rotate(180deg)
    }

    75% {
        transform: translate(150px,50px) rotate(270deg)
    }

    to {
        transform: translate(0) rotate(1turn)
    }
}

@keyframes shapeAnimationFour {
    0% {
        transform: translate(0) rotate(0deg)
    }

    25% {
        transform: translate(-150px -50px) rotate(90deg)
    }

    50% {
        transform: translate(-150px,-150px) rotate(180deg)
    }

    75% {
        transform: translate(-50px,-150px) rotate(270deg)
    }

    to {
        transform: translate(0) rotate(1turn)
    }
}

@keyframes shapeAnimationFive {
    0% {
        transform: translate(0) rotate(0deg)
    }

    25% {
        transform: translate(-100px -100px) rotate(90deg)
    }

    50% {
        transform: translate(100px,50px) rotate(180deg)
    }

    75% {
        transform: translate(-100px,150px) rotate(270deg)
    }

    to {
        transform: translate(0) rotate(1turn)
    }
}

@keyframes down-up-one {
    0% {
        transform: rotateX(0deg) translateY(0)
    }

    50% {
        transform: rotateX(0deg) translateY(25px)
    }

    to {
        transform: rotateX(0deg) translateY(0)
    }
}

@keyframes down-up-two {
    0% {
        transform: rotateX(0deg) translate(0)
    }

    50% {
        transform: rotateX(0deg) translateY(-25px)
    }

    to {
        transform: rotateX(0deg) translate(0)
    }
}

@keyframes leftRightOne {
    0%,to {
        transform: translateX(0)
    }

    50% {
        transform: translateX(50px)
    }
}

@keyframes leftRightTwo {
    0%,to {
        transform: translateX(0)
    }

    50% {
        transform: translateX(-50px)
    }
}

@keyframes zoomInOut {
    0%,to {
        transform: scale(1)
    }

    50% {
        transform: scale(.5)
    }
}

@keyframes preloader {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes marquee {
    to {
        transform: translate(-100%)
    }
}

@keyframes marquee_right {
    0% {
        transform: translate3d(-100%,0,0)
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes marquee_left {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(-100%,0,0)
    }
}
@keyframes swing {
    0% {
        transform: translateY(0%)
    }

    100% {
        transform: translateY(6%)
    }
}
@keyframes ripple {
    0% {
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1),
        0 0 0 20px rgba(0, 0, 0, 0.1);
    }
  
    100% {
      box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.1),
        0 0 0 40px rgba(0, 0, 0, 0);
    }
  }