css点击搜索 输入框从右到左出现，关闭时从左到右隐藏怎么实现？

Question

如图样式，点击搜索的时候 输入框从右到左慢慢展开，关闭时 输入框从左到右慢慢关闭，请求动画怎么实现？谢谢

Answer 1

过渡动画，宽度慢慢展开

Answer 2

 // css
 * {
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    .open .inp {
      width: 30%;
    }

    .inp {
      transition: width 0.65s linear;
      width: 15%;
      position: absolute;
      right: 10px;
    }

    .inp_txt {
      width: 100%;
    }
     
    // html
    <div class="box">
    <div class="inp">
      <input class="inp_txt" type="text">
    </div>
  </div>

 //js
 window.$ = window.$ || function (el) {
      var d = document;
      if (typeof el == 'string') {
        el = el.indexOf('.') != -1 ? d.getElementsByClassName(el.replace(/\./, '')) :
          el.indexOf('#') != -1 ? d.getElementById(el.replace(/\#/, '')) :
            d.querySelector(el);
      }
      return el;
    }

    $('.inp_txt')[0].onfocus = function () {
      $('.box')[0].className += ' open';
    }

    $('.inp_txt')[0].onblur = function () {
      var el = $('.box')[0];
      el.className = el.className.replace(/\s+open/, '');
    }