.animated-text, .animated-object {
    position: relative;
}

/* Default text */
p.animated-word .word {
    position: relative;
    display: inline-block;
    opacity: 1;
    transform: translateY(0);
    transition: .4s cubic-bezier(.2, 0, .3, 1);
}

p.animated-word .word.hidden {
    opacity: 0;
    transform: translateY(-10px);
    transition-duration: 0s;
}

/* Default title */
.animated-char .word {
    position: relative;
    display: inline-block;
}

.animated-char .char {
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: scale(.5);
    animation: animate-char .4s linear forwards;
}

.animated-char .char.hidden {
    animation: none;
    transition-duration: 0s;
    opacity: 0;
    transform: scale(.5);
}

.animated-char.ver2 .char {
    position: relative;
    display: inline-block;
    opacity: 1;
    transform: scale(1);
    transition: 2s cubic-bezier(.5, .5, 0, 1);
    animation: none;
}

.animated-char.ver2 .char.hidden {
    animation: none;
    transition-duration: 0s;
    opacity: 0;
    transform: scale(.9) translateY(20px);
}

@keyframes animate-char {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    10% {transform: translateY(-19.5px)}
    20% {transform: translateY(-18.5px) scale(1, 1.03)}
    30% {transform: translateY(-17px) scale(1, 1.08)}
    40% {transform: translateY(-15px) scale(1, 1.1); opacity: 1}
    50% {transform: translateY(-8px) scale(1, 1.4)}
    60% {transform: translateY(2px) scale(1, .9)}
    70% {transform: translateY(0px) scale(1, 1)}
    80% {transform: translateY(0px)}
    90% {transform: translateY(0px)}
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}