input.my-expand {
    animation: my-expand var(--animationDuration) forwards ease-out;
}

@keyframes my-expand {
    0% {
        width: var(--inputWidth);
    }

    10% {
        width: calc(var(--inputWidth) * 3.2);
    }

    35% {
        width: calc(var(--inputWidth) * 2.9);
    }

    50% {
        width: calc(var(--inputWidth) * 3.05);
    }

    100% {
        width: calc(var(--inputWidth) * 3);
    }

}

input.my-collapse {
    animation: my-collapse var(--animationDuration) forwards ease-out;
}

@keyframes my-collapse {
    0% {
        width: calc(var(--inputWidth) * 3);
    }

    10% {
        width: calc(var(--inputWidth) * 1.7);
    }

    35% {
        width: calc(var(--inputWidth) * 1.6);
    }

    50% {
        width: calc(var(--inputWidth) * 1.65);
    }

    100% {
        width: calc(var(--inputWidth) * 1.5);
    }
}

/*====================================================================================*/

@-moz-keyframes pop {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}

@-webkit-keyframes pop {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}

@-o-keyframes pop {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes pop {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}

@-moz-keyframes byBottom {
    0% {
        transform: translateY(150%);
    }

    100% {
        transform: translateY(0);
    }
}

@-webkit-keyframes byBottom {
    0% {
        transform: translateY(150%);
    }

    100% {
        transform: translateY(0);
    }
}

@-o-keyframes byBottom {
    0% {
        transform: translateY(150%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes byBottom {
    0% {
        transform: translateY(150%);
    }

    100% {
        transform: translateY(0);
    }
}

@-moz-keyframes linkAfter {
    0% {
        width: 0;
    }

    100% {
        width: 30px;
    }
}

@-webkit-keyframes linkAfter {
    0% {
        width: 0;
    }

    100% {
        width: 30px;
    }
}

@-o-keyframes linkAfter {
    0% {
        width: 0;
    }

    100% {
        width: 30px;
    }
}

@keyframes linkAfter {
    0% {
        width: 0;
    }

    100% {
        width: 30px;
    }
}