<div class="search">
    <svg x="0px" y="0px" viewBox="0 0 24 24" width="20px" height="20px">
        <g stroke-linecap="square" stroke-linejoin="miter" stroke="currentColor">
            <line fill="none" stroke-miterlimit="10" x1="22" y1="22" x2="16.4" y2="16.4"/>
            <circle fill="none" stroke="currentColor" stroke-miterlimit="10" cx="10" cy="10" r="9"/>
        </g>
    </svg>
    <div>
        <input type="text" placeholder="Search for something...">
    </div>
</div>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/4827926-Search-input-animation" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-1col-dnld-e29e0436f93d2f9c430fde5f3da66f94493fdca66351408ab0f96e2ec518ab17.png" alt=""></a>
$textColor: #000;

.search {
    display: flex;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all .3s ease .6s;
    box-shadow: 0 3px 14px -1px rgba(#000, .18);
    svg {
        cursor: pointer;
        margin: 20px;
        width: 18px;
        height: 18px;
        display: block;
        color: #000;
        stroke-width: 2;
        transform: rotate(90deg);
        transition: all .3s ease .6s;
    }
    & > div {
        position: relative;
        width: 0;
        transition: all .5s cubic-bezier(.51,.92,.24,1.15) .5s;
        input {
            font-size: inherit;
            line-height: inherit;
            padding: 0 24px 0 0;
            border: 0;
            display: block;
            outline: none;
            font-family: inherit;
            position: absolute;
            line-height: 20px;
            font-size: 16px;
            background: #fff;
            -webkit-appearance: none;
            top: 0;
            width: 100%;
            opacity: 0;
            z-index: 1;
            visibility: hidden;
            transition: all 0s ease 0s;
            &::-webkit-input-placeholder {
                color: $textColor;
            }
            &:-moz-placeholder {
                color: $textColor;
            }
            &::-moz-placeholder {
                color: $textColor;
            }
            &:-ms-input-placeholder {
                color: $textColor;
            }
        }
        & > div {
            white-space: nowrap;
            color: $textColor;
            display: flex;
            span {
                line-height: 20px;
                font-size: 16px;
                opacity: 0;
                display: block;
                visibility: hidden;
                transform: translate(0, 12px);
                transition: all .4s ease;
                &:nth-child(1) {
                    transition-delay: .4s;
                }
                &:nth-child(2) {
                    transition-delay: .2s;
                }
                &:nth-child(3) {
                    transition-delay: 0s;
                }
            }
        }
    }
    &.open {
        cursor: default;
        border-radius: 8px;
        transition-delay: 0s;
        box-shadow: 0 10px 36px -2px rgba(#000, .18);
        svg {
            opacity: .4;
            transform: rotate(0deg);
            transition-delay: 0s;
        }
        & > div {
            transition-delay: 0s;
            width: 200px;
            & > div {
                span {
                    opacity: 1;
                    visibility: visible;
                    transform: translate(0, 0);
                    &:nth-child(1) {
                        transition-delay: .4s;
                    }
                    &:nth-child(2) {
                        transition-delay: .45s;
                    }
                    &:nth-child(3) {
                        transition-delay: .50s;
                    }
                }
            }
            input {
                opacity: 1;
                visibility: visible;
                transition-delay: .75s;
            }
        }
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    font-family: Roboto, Arial;
    color: #ADAFB6;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        opacity: .5;
        transition: all .4s ease;
        &:hover {
            opacity: 1;
        }
        img {
            display: block;
            height: 36px;
        }
    }
}
View Compiled
$(document).ready(function() {

    $('.search').each(function() {
        var self = $(this);
        var div = self.children('div');
        var placeholder = div.children('input').attr('placeholder');
        var placeholderArr = placeholder.split(/ +/);
        if(placeholderArr.length) {
            var spans = $('<div />');
            $.each(placeholderArr, function(index, value) {
                spans.append($('<span />').html(value + '&nbsp;'));
            });
            div.append(spans);
        }
        self.click(function() {
            self.addClass('open');
            setTimeout(function() {
                self.find('input').focus();
            }, 750);
        });
        $(document).click(function(e) {
            if(!$(e.target).is(self) && !jQuery.contains(self[0], e.target)) {
                self.removeClass('open');
            }
        });
    });

});

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:400,500,700

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js