/* BLINKING */
.blink-short {
    visibility: hidden;
    animation: blink 1s linear;
}
.blink-medium {
    visibility: hidden;
    animation: blink 3s linear;
}
.blink-long {
    visibility: hidden;
    animation: blink 5s linear;
}
.blinking-short {
    visibility: hidden;
    animation: blink 1s infinite linear;
}
.blinking-medium {
    visibility: hidden;
    animation: blink 3s infinite linear;
}
.blinking-long {
    visibility: hidden;
    animation: blink 5s infinite linear;
}
@keyframes blink {
    50% {
        visibility: hidden;
    }

    100% {
        visibility: visible;
    }
}
/* PULSATING */
.pulse-short {
    animation: pulse 1s linear;
}
.pulse-medium {
    animation: pulse 3s linear;
}
.pulse-long {
    animation: pulse 5s linear;
}
.pulsating-short {
    animation: pulse 1s infinite linear;
}
.pulsating-medium {
    animation: pulse 3s infinite linear;
}
.pulsating-long {
    animation: pulse 5s infinite linear;
}
@keyframes pulse {
    15% {
        opacity: 0.25;
    }

    30% {
        opacity: 0.5;
    }

    45% {
        opacity: 0.75;
    }

    60% {
        opacity: 1;
    }
}
/* SHAKING */
.shake-fast {
    display: block;
    position: relative;
    transform-origin: 50% 50%;
    animation: shake 0.5s linear;
}
.shake-medium {
    display: block;
    position: relative;
    transform-origin: 50% 50%;
    animation: shake 2s linear;
}
.shake-slow {
    display: block;
    position: relative;
    transform-origin: 50% 50%;
    animation: shake 5s linear;
}
.shaking-fast {
    display: block;
    position: relative;
    transform-origin: 50% 50%;
    animation: shake 0.5s infinite linear;
}
.shaking-medium {
    display: block;
    position: relative;
    transform-origin: 50% 50%;
    animation: shake 2s infinite linear;
}
.shaking-slow {
    display: block;
    position: relative;
    transform-origin: 50% 50%;
    animation: shake 5s infinite linear;
}
@keyframes shake {
    0% {
        transform: translate(2px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(0px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(2px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(2px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}
/* ENLARGING */
.enlarge-card-detail {
    position: relative;
    transform-origin: 50% 50%;
    animation: enlarge 0.5s linear;
}
.enlarging-card-detail {
    position: relative;
    transform-origin: 50% 50%;
    animation: enlarge 0.5s infinite linear;
}
@keyframes enlarge {
    0% {
        font-size: 50px;
        opacity: 0.8;
    }

    20% {
        font-size: 54px;
        opacity: 0.6;
    }

    40% {
        font-size: 60px;
        opacity: 0.4;
    }

    60% {
        font-size: 54px;
        opacity: 0.6;
    }

    80% {
        font-size: 50px;
        opacity: 0.8;
    }

    100% {
        font-size: 48px;
        opacity: 1;
    }
}

/* BOUNCING */
.bouncing-fast {
    display: block;
    position: relative;
    animation: bounce 0.5s infinite ease-in-out;
}
.bouncing-medium {
    display: block;
    position: relative;
    animation: bounce 2s infinite ease-in-out;
}
.bouncing-slow {
    display: block;
    position: relative;
    animation: bounce 5s infinite ease-in-out;
}
@keyframes bounce {
    20% {
        transform: translate(0px, 2px);
    }
    40% {
        transform: translate(0px, -3px);
    }
    50% {
        transform: translate(0px, -5px);
    }
    60% {
        transform: translate(0px, -3px);
    }
    80% {
        transform: translate(0px, 2px);
    }
}

/* ROTATING */
.rotating {
    -webkit-animation: rotation 1.5s infinite linear;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}