@keyframes zkf-drawing-vibrate {
    from {
        opacity: 1.0;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }

    100% {
        opacity: 1.0;
        transform: scale(1);
    }
}

@keyframes zkf-drawing-shake {
    from {
        opacity: 1.0;
        transform: scale(1);
    }

    33% {
        opacity: 0.4;
        transform: rotate(10deg) scale(1.2);
    }

    66% {
        opacity: 0.4;
        transform: rotate(-10deg)scale(1.2);
    }

    100% {
        opacity: 1.0;
        transform: scale(1);
    }
}

@keyframes zkf-drawing-bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-40px);
    }

    60% {
        transform: translateY(-20px);
    }
}

@keyframes zkf-drawing-rotate {
    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes zkf-drawing-vertical-flip {
    to {
        /* ios 360deg or 1 turn is not working well */
        transform: rotateY(-360deg);
    }
}

@keyframes zkf-drawing-blinking {
    from {
        opacity: 1.0;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.3);
    }

    100% {
        opacity: 1.0;
        transform: scale(1);
    }
}

@keyframes zkf-drawing-inflate {
    from {
        opacity: 1.0;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(2.2);
    }

    100% {
        opacity: 1.0;
        transform: scale(1);
    }
}

@keyframes zkf-drawing-glowing-outline {
    from {}

    50% {
        filter: drop-shadow(22px 22px 20px rgba(255, 255, 255, 0.95)) drop-shadow(-22px -22px 20px rgba(255, 255, 255, 0.95));
    }

    100% {}
}

@keyframes zkf-fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes zkf-fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes zkf-scroll-in-left {
    0% {
        transform: translate(100%, 0);
    }

    100% {
        transform: translate(0%, 0);
    }
}

@keyframes zkf-scroll-in-right {
    0% {
        transform: translate(-100%, 0);
    }

    100% {
        transform: translate(0%, 0);
    }
}

@keyframes zkf-scroll-in-up {
    0% {
        transform: translate(0, 100%);
    }

    100% {
        transform: translate(0%, 0);
    }
}

@keyframes zkf-scroll-in-down {
    0% {
        transform: translate(0, -100%);
    }

    100% {
        transform: translate(0%, 0);
    }
}