@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes bingbing {
    from{ transform: rotate(0); }
    to{ transform: rotate(360deg); }
}

@keyframes plump0 {
    0%   { transform: translate(-35%, calc(-50% - 0)); }
    10%  { transform: translate(-35%, calc(-50% + 10px)); }
    30%  { transform: translate(-35%, calc(-50% - 10px)); }
    64%  { transform: translate(-35%, calc(-50% + 10px)); }
    85%  { transform: translate(-35%, calc(-50% - 10px)); }
    100% { transform: translate(-35%, calc(-50% - 0)); }
}

@keyframes plump1 {
    0%   { transform: translate(-50%, calc(-25% - 0)); }
    10%  { transform: translate(-50%, calc(-25% + 10px)); }
    30%  { transform: translate(-50%, calc(-25% - 10px)); }
    64%  { transform: translate(-50%, calc(-25% + 10px)); }
    85%  { transform: translate(-50%, calc(-25% - 10px)); }
    100% { transform: translate(-50%, calc(-25% - 0)); }
}

@keyframes plump2 {
    0%   { transform: translate(45%, -10%); }
    10%  { transform: translate(45%, calc(-10% + 10px)); }
    30%  { transform: translate(45%, calc(-10% - 10px)); }
    64%  { transform: translate(45%, calc(-10% + 10px)); }
    85%  { transform: translate(45%, calc(-10% - 10px)); }
    100% { transform: translate(45%, -10%); }
}

@keyframes plump3 {
    0%   { transform: translate(0%, calc(-10% - 0)); }
    10%  { transform: translate(0%, calc(-10% + 10px)); }
    30%  { transform: translate(0%, calc(-10% - 10px)); }
    64%  { transform: translate(0%, calc(-10% + 10px)); }
    85%  { transform: translate(0%, calc(-10% - 10px)); }
    100% { transform: translate(0%, calc(-10% - 0)); }
}

@keyframes bounce {
    0%   { filter: blur(2px); transform: translateY(calc(-100% - 20px)); }
    10%  { filter: blur(2px); transform: translateY(0); }
    30%  { filter: blur(0px); transform: translateY(-20px); }
    50%  { filter: blur(0px); transform: translateY(0); }
    57%  { filter: blur(0px); transform: translateY(0); }
    64%  { filter: blur(0px); transform: translateY(-3px); }
    67%  { filter: blur(0px); transform: translateY(0px); }
    80%  { filter: blur(0px); transform: translateY(-2px); }
    100% { filter: blur(0px); transform: translateY(0); }
}

@keyframes rotate180 {
    to{ transform: rotate(180deg); }
}

@keyframes shine {
    to { background-position: right -40px top 0; }
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
        -webkit-transform: translate3d(-1px, 0, 0);
        -moz-transform: translate3d(-1px, 0, 0);
        -ms-transform: translate3d(-1px, 0, 0);
        -o-transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
        -webkit-transform: translate3d(2px, 0, 0);
        -moz-transform: translate3d(2px, 0, 0);
        -ms-transform: translate3d(2px, 0, 0);
        -o-transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
        -webkit-transform: translate3d(-4px, 0, 0);
        -moz-transform: translate3d(-4px, 0, 0);
        -ms-transform: translate3d(-4px, 0, 0);
        -o-transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
        -webkit-transform: translate3d(4px, 0, 0);
        -moz-transform: translate3d(4px, 0, 0);
        -ms-transform: translate3d(4px, 0, 0);
        -o-transform: translate3d(4px, 0, 0);
    }
}