如何用动画制作这样的序列？

Question

如何用动画制作这样的序列？当我单击图标时，文本应平滑消失（图标仍应保留在其原始位置！），然后图标应向右移动，这时底部的条应移到左侧，然后是占位符应该出现。我只需要CSS。

* {
  box-sizing: border-box;
}

.site-search {
  position: relative;
}

.site-search__icon {
  position: relative;
  cursor: pointer;
  margin-left: -4px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
}

.site-search__icon .icon {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  height: 20px;
  width: 20px;
  position: absolute;
  left: -30px;
  top: 10px;
  fill: white;
}

.site-search__input {
  border: none;
  cursor: pointer;
  height: 40px;
  padding-left: 15px;
  text-indent: -9999px;
  width: 40px;
  color: #000;
  outline: none;
  transition: width 0.2s cubic-bezier(0, 1.2, 0.4, 1.1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
  overflow: hidden;
  /*border: 2px solid #f7f7f7;*/
  /*text-align: center;*/
  text-transform: uppercase;
  position: relative;
  background-image: linear-gradient(to left, red, red);
  background-position: bottom right;
  background-size: 0% 2px;
  background-repeat: no-repeat;
  /*transition: 1s;*/
}

.site-search__input::-webkit-input-placeholder {
  color: #000;
}

.site-search__input:-moz-placeholder {
  color: #000;
}

.site-search__input::-moz-placeholder {
  color: #000;
}

.site-search__input:-ms-input-placeholder {
  color: #000;
}

.site-search__input:focus::-webkit-input-placeholder {
  opacity: .5;
}

.site-search__input:focus:-moz-placeholder {
  opacity: .5;
}

.site-search__input:focus::-moz-placeholder {
  opacity: .5;
}

.site-search__input:focus:-ms-input-placeholder {
  opacity: .5;
}

.site-search__input:focus {
  text-indent: 0;
  width: 300px;
  padding-left: 15px;
  background-size: 100% 2px;
}

.site-search__input:focus~.test {
  display: none;
}

.site-search__submit {
  display: none;
}

.s {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

.s-content {
  margin: auto 220px 60px;
  flex: 1 1 0%;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  color: #000;
}

.site-search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  /*transition-delay: 2s;*/
}

<main class="s">
  <div class="s-content">
    <form class="site-search" action="/searchresults.asp" method="get" name="SearchBoxForm">
      <input id="search" class="site-search__input" type="text" name="Search" value="" placeholder="Search...">
      <label for="search" class="site-search__icon">      
          <svg class="icon"><use xlink:href="#icon-search"></use></svg>
      </label>
      <span class="test">Search on site</span>
      <button class="site-search__submit" type="submit" name="Submit" value=""></button>
    </form>

    <span style="display: none">
	  <svg xmlns="http://www.w3.org/2000/svg">
	  <symbol viewBox="0 0 512 512" id="icon-search">
	    <title>search</title>
	    <path fill="#000" id="search-magnifier-2-icon" d="M460.355,421.59L353.844,315.078c20.041-27.553,31.885-61.437,31.885-98.037	C385.729,124.934,310.793,50,218.686,50C126.58,50,51.645,124.934,51.645,217.041c0,92.106,74.936,167.041,167.041,167.041
	    	c34.912,0,67.352-10.773,94.184-29.158L419.945,462L460.355,421.59z M100.631,217.041c0-65.096,52.959-118.056,118.055-118.056
	    	c65.098,0,118.057,52.959,118.057,118.056c0,65.096-52.959,118.056-118.057,118.056C153.59,335.097,100.631,282.137,100.631,217.041 	z" /> </symbol>
	  </svg>
	</span>