.search-box {
    border: solid 5px darkred;
    display: inline-block;
    position: relative;
    border-radius: 50px;
}

.search-box input[type="text"] {
    font-size: 14px;
    width: 20px;
    height: 20px;
    padding: 5px 5px 5px 5px;
    border: none;
    box-sizing: border-box;
    border-radius: 50px;
    transition: width 800ms cubic-bezier(0.5, -0.5, 0.5, 0.5) 600ms;
}

    .search-box input[type="text"]:focus {
        outline: none;
    }

    .search-box input[type="text"]:focus, .search-box input[type="text"]:not(:placeholder-shown) {
        width: 200px;
        transition: width 800ms cubic-bezier(0.5, -0.5, 0.5, 1.5);
    }

        .search-box input[type="text"]:focus + span, .search-box input[type="text"]:not(:placeholder-shown) + span {
            bottom: 0px;
            right: 10px;
            transition: bottom 300ms ease-out 800ms, right 300ms ease-out 800ms;
        }

            .search-box input[type="text"]:focus + span:after, .search-box input[type="text"]:not(:placeholder-shown) + span:after {
                top: 0px;
                right: 8px;
                opacity: 1;
                transition: top 300ms ease-out 1100ms, right 300ms ease-out 1100ms, opacity 300ms ease 1100ms;
            }

.search-box span {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -15px;
    right: -15px;
    transition: bottom 300ms ease-out 300ms, right 300ms ease-out 300ms;
}

    .search-box span:before, .search-box span:after {
        content: '';
        height: 20px;
        border-left: solid 5px darkred;
        position: absolute;
        transform: rotate(-45deg);
    }

    .search-box span:after {
        transform: rotate(45deg);
        opacity: 0;
        top: -15px;
        right: -15px;
        transition: top 300ms ease-out, right 300ms ease-out, opacity 300ms ease-out;
    }