@import './ani-flash-label.css';
@import './ani-roll-in-label.css';
@import './ani-roll-out-label.css';
@import './ani-bounce-in-label.css';
@import './ani-bounce-out-label.css';
@import './ani-shaking-label.css';
@import './ani-pulse-label.css';
@keyframes flash-1 {
    0%,
    20%,
    40%,
    60% {
        opacity: 1;
    }
    10%,
    30%,
    50% {
        opacity: 0;
    }
}

@keyframes shake-bottom {
    0%,
    22%,
    44%,
    66% {
        transform: rotate(0deg);
        transform-origin: 50% 100%;
    }
    1.5%,
    3%,
    20%,
    24%,
    40%,
    46%,
    62% {
        transform: rotate(2deg);
    }
    6%,
    10%,
    14%,
    26%,
    30%,
    34%,
    48%,
    52%,
    56% {
        transform: rotate(-4deg);
    }
    8%,
    12%,
    16%,
    28%,
    32%,
    36%,
    50%,
    54%,
    58% {
        transform: rotate(4deg);
    }
    18%,
    38%,
    60% {
        transform: rotate(-2deg);
    }
}

@keyframes heartbeat {
    0%,
    23.33%,
    46.66%,
    70% {
        transform: scale(1);
        transform-origin: center center;
        animation-timing-function: ease-out;
    }
    3.33%,
    26.66%,
    50% {
        transform: scale(0.91);
        animation-timing-function: ease-in;
    }
    5.66%,
    28.99%,
    52.33% {
        transform: scale(0.98);
        animation-timing-function: ease-out;
    }
    11%,
    34.33%,
    57.66% {
        transform: scale(0.87);
        animation-timing-function: ease-in;
    }
    15%,
    38.33%,
    61.66% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
}

.ani-flash {
    animation: flash-1 3.5s infinite;
}

.ani-shaking {
    animation: shake-bottom 5s infinite;
}

.ani-pulse {
    animation: heartbeat 5s infinite;
}