<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>お名前</label>
  <span class="focus_bg"></span>
</div>
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>E-Mail</label>
  <span class="focus_bg"></span>
</div>

.cp_iptxt {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 20px 0;
}
.cp_iptxt input[type='text'] {
  font: 15px/1.6 sans-serif;
  width: 100%;
  padding-left: 4em;
  border: 1px solid #1b2538;
  background: transparent;
  border-radius: 0;
  outline: none;
}
.cp_iptxt .ef {
  position: relative;
  padding: 7px 15px;
  border: 0;
  border: 1px solid #1b2538;
  background: transparent;
}
.cp_iptxt .ef ~ .focus_bg:before,
.cp_iptxt .ef ~ .focus_bg:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 0;
  height: 0;
  background-color: rgba(218,60,65,.3);
  transition: 0.3s;
}
.cp_iptxt .ef:focus {
  border: 1px solid #da3c41;
}
.cp_iptxt .ef:focus ~ .focus_bg:before {
  width: 50%;
  height: 100%;
  transition: 0.3s;
}
.cp_iptxt .ef ~ .focus_bg:after {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
}
.cp_iptxt .ef:focus ~ .focus_bg:after {
  width: 50%;
  height: 100%;
  transition: 0.3s;
}
.cp_iptxt .ef ~ label {
  position: absolute;
  left: 14px;
  color: #aaaaaa;
  transition: 0.3s;
}
.cp_iptxt .ef:focus ~ label {
  font-size: 12px;
  top: -18px;
  left: 0;
  color: #da3c41;
  transition: 0.3s;
}