.heartbeat {
    -webkit-animation: heartbeat 7.5s ease-in-out infinite both;
    animation: heartbeat 7.5s ease-in-out infinite both;
}
.heartbeat:hover{
    animation-play-state: paused;
}
.roll-in-left {
    -webkit-animation: roll-in-left 1s ease-out both;
    animation: roll-in-left 1s ease-out both;
}
.slide-in-left {
    -webkit-animation: slide-in-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-8-18 10:2:53
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: translateY(-50%) scale(1);
        transform: translateY(-50%) scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    3% {
        -webkit-transform: translateY(-50%) scale(0.91);
        transform: translateY(-50%) scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    6% {
        -webkit-transform: translateY(-50%) scale(0.98);
        transform: translateY(-50%) scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    11% {
        -webkit-transform: translateY(-50%) scale(0.87);
        transform: translateY(-50%) scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    15% {
        -webkit-transform: translateY(-50%) scale(1);
        transform: translateY(-50%) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
@keyframes heartbeat {
    from {
        -webkit-transform: translateY(-50%) scale(1);
        transform: translateY(-50%) scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    3% {
        -webkit-transform: translateY(-50%) scale(0.91);
        transform: translateY(-50%) scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    6% {
        -webkit-transform: translateY(-50%) scale(0.98);
        transform: translateY(-50%) scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    11% {
        -webkit-transform: translateY(-50%) scale(0.87);
        transform: translateY(-50%) scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    15% {
        -webkit-transform: translateY(-50%) scale(1);
        transform: translateY(-50%) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
/* ----------------------------------------------
 * Generated by Animista on 2020-8-25 9:11:24
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation roll-in-left
 * ----------------------------------------
 */
@-webkit-keyframes roll-in-left {
    0% {
        -webkit-transform: translateX(-100%) rotate(-360deg);
        transform: translateX(-100%) rotate(-360deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}
@keyframes roll-in-left {
    0% {
        -webkit-transform: translateX(-100%) rotate(-360deg);
        transform: translateX(-100%) rotate(-360deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}
/* ----------------------------------------------
 * Generated by Animista on 2020-8-25 9:17:50
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}


