<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>

<div class="row">
  <div class="container">
  <h2>Пограничные эффекты</h2>
  <div class="col-3">
  <input class="animativadas-1" type="text" placeholder="Заполнить текстом">
  <span class="focus-border"></span>
  </div>
  <div class="col-3">
  <input class="animativadas-2" type="text" placeholder="Заполнить текстом">
  <span class="focus-border"></span>
  </div>
  <div class="col-3">
  <input class="animativadas-3" type="text" placeholder="Заполнить текстом">
  <span class="focus-border"></span>
  </div>
   
  <div class="col-3">
  <input class="animativadas-4" type="text" placeholder="Заполнить текстом">
  <span class="focus-border"></span>
  </div>
  <div class="col-3">
  <input class="animativadas-5" type="text" placeholder="Заполнить текстом">
  <span class="focus-border"></span>
  </div>
  <div class="col-3">
  <input class="animativadas-6" type="text" placeholder="Заполнить текстом">
  <span class="focus-border"></span>
  </div>
   
  <div class="col-3">
  <input class="animativadas-7" type="text" placeholder="Заполнить текстом">
  <span class="focus-border">
  <i></i>
  </span>
  </div>
  <div class="col-3">
  <input class="animativadas-8" type="text" placeholder="Заполнить текстом">
  <span class="focus-border">
  <i></i>
  </span>
  </div>
  <div class="col-3">
  <input class="animativadas-9" type="text" placeholder="Заполнить текстом">
  <span class="focus-border">
  <i></i>
  </span>
  </div>
   
  <h2>Фоновые эффекты</h2>
  <div class="col-3">
  <input class="animativadas-10" type="text" placeholder="Заполнить текстом">
  <span class="focus-bg"></span>
  </div>
  <div class="col-3">
  <input class="animativadas-11" type="text" placeholder="Заполнить текстом">
  <span class="focus-bg"></span>
  </div>
  <div class="col-3">
  <input class="animativadas-12" type="text" placeholder="Заполнить текстом">
  <span class="focus-bg"></span>
  </div>
  <div class="col-3">
  <input class="animativadas-13" type="text" placeholder="Заполнить текстом">
  <span class="focus-bg"></span>
  </div>
  <div class="col-3">
  <input class="animativadas-14" type="text" placeholder="Заполнить текстом">
  <span class="focus-bg"></span>
  </div>
  <div class="col-3">
  <input class="animativadas-15" type="text" placeholder="Заполнить текстом">
  <span class="focus-bg"></span>
  </div>
   
  <h2>Ввод с эффектами меток</h2>
  <div class="col-3 input-effect">
  <input class="animativadas-16" type="text" placeholder="">
  <label>Название</label>
  <span class="focus-border"></span>
  </div>
  <div class="col-3 input-effect">
  <input class="animativadas-17" type="text" placeholder="">
  <label>Название</label>
  <span class="focus-border"></span>
  </div>
  <div class="col-3 input-effect">
  <input class="animativadas-18" type="text" placeholder="">
  <label>Название</label>
  <span class="focus-border"></span>
  </div>
   
  <div class="col-3 input-effect">
  <input class="animativadas-19" type="text" placeholder="">
  <label>Название</label>
  <span class="focus-border">
  <i></i>
  </span>
  </div>
  <div class="col-3 input-effect">
  <input class="animativadas-20" type="text" placeholder="">
  <label>Название</label>
  <span class="focus-border">
  <i></i>
  </span>
  </div>
  <div class="col-3 input-effect">
  <input class="animativadas-21" type="text" placeholder="">
  <label>Название</label>
  <span class="focus-border">
  <i></i>
  </span>
  </div>
   
  <div class="col-3 input-effect">
  <input class="animativadas-22" type="text" placeholder="">
  <label>Название</label>
  <span class="focus-bg"></span>
  </div>
  <div class="col-3 input-effect">
  <input class="animativadas-23" type="text" placeholder="">
  <label>Название</label>
  <span class="focus-bg"></span>
  </div>
  <div class="col-3 input-effect">
  <input class="animativadas-24" type="text" placeholder="">
  <label>Название</label>
  <span class="focus-bg"></span>
  </div>
  </div>
</div>

.container {
  margin: 0 auto;
  max-width: 1200px;
}
.row {
  float: left;
  width: 100%;
  padding: 20px 0 50px;
}
h2 {
  text-align: center;
  color: #45af45;
  font-size: 28px;
  float: left;
  width: 100%;
  margin: 30px 0;
  position: relative;
  line-height: 58px;
  font-weight: 400;
}
h2:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100px;
  height: 2px;
  background-color: #45af45;
  margin-left: -50px;
}
:focus {
  outline: none;
}
.col-3 {
  float: left;
  width: 27.33%;
  margin: 40px 3%;
  position: relative;
}
input[type="text"] {
  font: 15px/24px "Lato", Arial, sans-serif;
  color: #2f2d2d;
  width: 100%;
  box-sizing: border-box;
  letter-spacing: 1px;
}
.animativadas-1,
.animativadas-2,
.animativadas-3 {
  border: 0;
  padding: 7px 0;
  border-bottom: 1px solid #ccc;
}
.animativadas-1~.focus-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-1:focus~.focus-border {
  width: 100%;
  transition: 0.4s;
}
.animativadas-2~.focus-border {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-2:focus~.focus-border {
  width: 100%;
  transition: 0.4s;
  left: 0;
}
.animativadas-3~.focus-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 99;
}
.animativadas-3~.focus-border:before,
.animativadas-3~.focus-border:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-3~.focus-border:after {
  left: auto;
  right: 0;
}
.animativadas-3:focus~.focus-border:before,
.animativadas-3:focus~.focus-border:after {
  width: 50%;
  transition: 0.4s;
}
.animativadas-4,
.animativadas-5,
.animativadas-6 {
  border: 0;
  padding: 5px 0 7px;
  border: 1px solid transparent;
  border-bottom-color: #ccc;
  transition: 0.4s;
}
.animativadas-4:focus,
.animativadas-5:focus,
.animativadas-6:focus {
  padding: 5px 14px 7px;
  transition: 0.4s;
}
.animativadas-4~.focus-border {
  position: absolute;
  height: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: 0.4s;
  z-index: -1;
}
.animativadas-4:focus~.focus-border {
  transition: 0.4s;
  height: 36px;
  border: 2px solid #03e64c;
  z-index: 1;
}
.animativadas-5~.focus-border {
  position: absolute;
  height: 36px;
  bottom: 0;
  left: 0;
  width: 0;
  transition: 0.4s;
}
.animativadas-5:focus~.focus-border {
  width: 100%;
  transition: 0.4s;
  border: 2px solid #03e64c;
}
.animativadas-6~.focus-border {
  position: absolute;
  height: 36px;
  bottom: 0;
  right: 0;
  width: 0;
  transition: 0.4s;
}
.animativadas-6:focus~.focus-border {
  width: 100%;
  transition: 0.4s;
  border: 2px solid #03e64c;
}
.animativadas-7,
.animativadas-8,
.animativadas-9 {
  border: 1px solid #ccc;
  padding: 7px 14px 9px;
  transition: 0.4s;
}
.animativadas-7~.focus-border:before,
.animativadas-7~.focus-border:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-7~.focus-border:after {
  top: auto;
  bottom: 0;
}
.animativadas-7~.focus-border i:before,
.animativadas-7~.focus-border i:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 0;
  background-color: #03e64c;
  transition: 0.6s;
}
.animativadas-7~.focus-border i:after {
  left: auto;
  right: 0;
}
.animativadas-7:focus~.focus-border:before,
.animativadas-7:focus~.focus-border:after {
  left: 0;
  width: 100%;
  transition: 0.4s;
}
.animativadas-7:focus~.focus-border i:before,
.animativadas-7:focus~.focus-border i:after {
  top: 0;
  height: 100%;
  transition: 0.6s;
}
.animativadas-8~.focus-border:before,
.animativadas-8~.focus-border:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.3s;
}
.animativadas-8~.focus-border:after {
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
}
.animativadas-8~.focus-border i:before,
.animativadas-8~.focus-border i:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-8~.focus-border i:after {
  left: auto;
  right: 0;
  top: auto;
  bottom: 0;
}
.animativadas-8:focus~.focus-border:before,
.animativadas-8:focus~.focus-border:after {
  width: 100%;
  transition: 0.3s;
}
.animativadas-8:focus~.focus-border i:before,
.animativadas-8:focus~.focus-border i:after {
  height: 100%;
  transition: 0.4s;
}
.animativadas-9~.focus-border:before,
.animativadas-9~.focus-border:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.2s;
  transition-delay: 0.2s;
}
.animativadas-9~.focus-border:after {
  top: auto;
  bottom: 0;
  right: auto;
  left: 0;
  transition-delay: 0.6s;
}
.animativadas-9~.focus-border i:before,
.animativadas-9~.focus-border i:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0;
  background-color: #03e64c;
  transition: 0.2s;
}
.animativadas-9~.focus-border i:after {
  left: auto;
  right: 0;
  top: auto;
  bottom: 0;
  transition-delay: 0.4s;
}
.animativadas-9:focus~.focus-border:before,
.animativadas-9:focus~.focus-border:after {
  width: 100%;
  transition: 0.2s;
  transition-delay: 0.6s;
}
.animativadas-9:focus~.focus-border:after {
  transition-delay: 0.2s;
}
.animativadas-9:focus~.focus-border i:before,
.animativadas-9:focus~.focus-border i:after {
  height: 100%;
  transition: 0.2s;
}
.animativadas-9:focus~.focus-border i:after {
  transition-delay: 0.4s;
}
.animativadas-10,
.animativadas-11,
.animativadas-12,
.animativadas-13,
.animativadas-14,
.animativadas-15 {
  border: 0;
  padding: 7px 15px;
  border: 1px solid #ccc;
  position: relative;
  background: transparent;
}
.animativadas-10~.focus-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ededed;
  opacity: 0;
  transition: 0.5s;
  z-index: -1;
}
.animativadas-10:focus~.focus-bg {
  transition: 0.5s;
  opacity: 1;
}
.animativadas-11~.focus-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #ededed;
  transition: 0.3s;
  z-index: -1;
}
.animativadas-11:focus~.focus-bg {
  transition: 0.3s;
  width: 100%;
}
.animativadas-12~.focus-bg {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #ededed;
  transition: 0.3s;
  z-index: -1;
}
.animativadas-12:focus~.focus-bg {
  transition: 0.3s;
  width: 100%;
  left: 0;
}
.animativadas-13~.focus-bg:before,
.animativadas-13~.focus-bg:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #ededed;
  transition: 0.3s;
  z-index: -1;
}
.animativadas-13:focus~.focus-bg:before {
  transition: 0.3s;
  width: 50%;
}
.animativadas-13~.focus-bg:after {
  left: auto;
  right: 0;
}
.animativadas-13:focus~.focus-bg:after {
  transition: 0.3s;
  width: 50%;
}
.animativadas-14~.focus-bg:before,
.animativadas-14~.focus-bg:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  background-color: #ededed;
  transition: 0.3s;
  z-index: -1;
}
.animativadas-14:focus~.focus-bg:before {
  transition: 0.3s;
  width: 50%;
  height: 100%;
}
.animativadas-14~.focus-bg:after {
  left: auto;
  right: 0;
  top: auto;
  bottom: 0;
}
.animativadas-14:focus~.focus-bg:after {
  transition: 0.3s;
  width: 50%;
  height: 100%;
}
.animativadas-15~.focus-bg:before,
.animativadas-15~.focus-bg:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  background-color: #ededed;
  transition: 0.3s;
  z-index: -1;
}
.animativadas-15:focus~.focus-bg:before {
  transition: 0.3s;
  width: 50%;
  left: 0;
  top: 0;
  height: 100%;
}
.animativadas-15~.focus-bg:after {
  left: auto;
  right: 50%;
  top: auto;
  bottom: 50%;
}
.animativadas-15:focus~.focus-bg:after {
  transition: 0.3s;
  width: 50%;
  height: 100%;
  bottom: 0;
  right: 0;
}
.animativadas-16,
.animativadas-17,
.animativadas-18 {
  border: 0;
  padding: 4px 0;
  border-bottom: 1px solid #ccc;
  background-color: transparent;
}
.animativadas-16~.focus-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-16:focus~.focus-border,
.has-content.animativadas-16~.focus-border {
  width: 100%;
  transition: 0.4s;
}
.animativadas-16~label {
  position: absolute;
  left: 0;
  width: 100%;
  top: 9px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}
.animativadas-16:focus~label,
.has-content.animativadas-16~label {
  top: -16px;
  font-size: 12px;
  color: #03e64c;
  transition: 0.3s;
}
.animativadas-17~.focus-border {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-17:focus~.focus-border,
.has-content.animativadas-17~.focus-border {
  width: 100%;
  transition: 0.4s;
  left: 0;
}
.animativadas-17~label {
  position: absolute;
  left: 0;
  width: 100%;
  top: 9px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}
.animativadas-17:focus~label,
.has-content.animativadas-17~label {
  top: -16px;
  font-size: 12px;
  color: #03e64c;
  transition: 0.3s;
}
.animativadas-18~.focus-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 99;
}
.animativadas-18~.focus-border:before,
.animativadas-18~.focus-border:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-18~.focus-border:after {
  left: auto;
  right: 0;
}
.animativadas-18:focus~.focus-border:before,
.animativadas-18:focus~.focus-border:after,
.has-content.animativadas-18~.focus-border:before,
.has-content.animativadas-18~.focus-border:after {
  width: 50%;
  transition: 0.4s;
}
.animativadas-18~label {
  position: absolute;
  left: 0;
  width: 100%;
  top: 9px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}
.animativadas-18:focus~label,
.has-content.animativadas-18~label {
  top: -16px;
  font-size: 12px;
  color: #03e64c;
  transition: 0.3s;
}
.animativadas-19,
.animativadas-20,
.animativadas-21 {
  border: 1px solid #ccc;
  padding: 7px 14px;
  transition: 0.4s;
  background: transparent;
}
.animativadas-19~.focus-border:before,
.animativadas-19~.focus-border:after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-19~.focus-border:after {
  top: auto;
  bottom: 0;
}
.animativadas-19~.focus-border i:before,
.animativadas-19~.focus-border i:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 0;
  background-color: #03e64c;
  transition: 0.6s;
}
.animativadas-19~.focus-border i:after {
  left: auto;
  right: 0;
}
.animativadas-19:focus~.focus-border:before,
.animativadas-19:focus~.focus-border:after,
.has-content.animativadas-19~.focus-border:before,
.has-content.animativadas-19~.focus-border:after {
  left: 0;
  width: 100%;
  transition: 0.4s;
}
.animativadas-19:focus~.focus-border i:before,
.animativadas-19:focus~.focus-border i:after,
.has-content.animativadas-19~.focus-border i:before,
.has-content.animativadas-19~.focus-border i:after {
  top: -1px;
  height: 100%;
  transition: 0.6s;
}
.animativadas-19~label {
  position: absolute;
  left: 14px;
  width: 100%;
  top: 10px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}
.animativadas-19:focus~label,
.has-content.animativadas-19~label {
  top: -18px;
  left: 0;
  font-size: 12px;
  color: #03e64c;
  transition: 0.3s;
}
.animativadas-20~.focus-border:before,
.animativadas-20~.focus-border:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.3s;
}
.animativadas-20~.focus-border:after {
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
}
.animativadas-20~.focus-border i:before,
.animativadas-20~.focus-border i:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-20~.focus-border i:after {
  left: auto;
  right: 0;
  top: auto;
  bottom: 0;
}
.animativadas-20:focus~.focus-border:before,
.animativadas-20:focus~.focus-border:after,
.has-content.animativadas-20~.focus-border:before,
.has-content.animativadas-20~.focus-border:after {
  width: 100%;
  transition: 0.3s;
}
.animativadas-20:focus~.focus-border i:before,
.animativadas-20:focus~.focus-border i:after,
.has-content.animativadas-20~.focus-border i:before,
.has-content.animativadas-20~.focus-border i:after {
  height: 100%;
  transition: 0.4s;
}
.animativadas-20~label {
  position: absolute;
  left: 14px;
  width: 100%;
  top: 10px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}
.animativadas-20:focus~label,
.has-content.animativadas-20~label {
  top: -18px;
  left: 0;
  font-size: 12px;
  color: #03e64c;
  transition: 0.3s;
}
.animativadas-21~.focus-border:before,
.animativadas-21~.focus-border:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.2s;
  transition-delay: 0.2s;
}
.animativadas-21~.focus-border:after {
  top: auto;
  bottom: 0;
  right: auto;
  left: 0;
  transition-delay: 0.6s;
}
.animativadas-21~.focus-border i:before,
.animativadas-21~.focus-border i:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0;
  background-color: #03e64c;
  transition: 0.2s;
}
.animativadas-21~.focus-border i:after {
  left: auto;
  right: 0;
  top: auto;
  bottom: 0;
  transition-delay: 0.4s;
}
.animativadas-21:focus~.focus-border:before,
.animativadas-21:focus~.focus-border:after,
.has-content.animativadas-21~.focus-border:before,
.has-content.animativadas-21~.focus-border:after {
  width: 100%;
  transition: 0.2s;
  transition-delay: 0.6s;
}
.animativadas-21:focus~.focus-border:after,
.has-content.animativadas-21~.focus-border:after {
  transition-delay: 0.2s;
}
.animativadas-21:focus~.focus-border i:before,
.animativadas-21:focus~.focus-border i:after,
.has-content.animativadas-21~.focus-border i:before,
.has-content.animativadas-21~.focus-border i:after {
  height: 100%;
  transition: 0.2s;
}
.animativadas-21:focus~.focus-border i:after,
.has-conten.animativadas-21~.focus-border i:after {
  transition-delay: 0.4s;
}
.animativadas-21~label {
  position: absolute;
  left: 14px;
  width: 100%;
  top: 10px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}
.animativadas-21:focus~label,
.has-content.animativadas-21~label {
  top: -18px;
  left: 0;
  font-size: 12px;
  color: #03e64c;
  transition: 0.3s;
}
.animativadas-22,
.animativadas-23,
.animativadas-24 {
  border: 0;
  padding: 7px 15px;
  border: 1px solid #ccc;
  position: relative;
  background: transparent;
}
.animativadas-22~.focus-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: transparent;
  transition: 0.4s;
  z-index: -1;
}
.animativadas-22:focus~.focus-bg,
.has-content.animativadas-22~.focus-bg {
  transition: 0.4s;
  width: 100%;
  background-color: #ededed;
}
.animativadas-22~label {
  position: absolute;
  left: 14px;
  width: 100%;
  top: 10px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}
.animativadas-22:focus~label,
.has-content.animativadas-22~label {
  top: -18px;
  left: 0;
  font-size: 12px;
  color: #2f2d2d;
  transition: 0.3s;
}
.animativadas-23~.focus-bg:before,
.animativadas-23~.focus-bg:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  background-color: #ededed;
  transition: 0.3s;
  z-index: -1;
}
.animativadas-23:focus~.focus-bg:before,
.has-content.animativadas-23~.focus-bg:before {
  transition: 0.3s;
  width: 50%;
  height: 100%;
}
.animativadas-23~.focus-bg:after {
  left: auto;
  right: 0;
  top: auto;
  bottom: 0;
}
.animativadas-23:focus~.focus-bg:after,
.has-content.animativadas-23~.focus-bg:after {
  transition: 0.3s;
  width: 50%;
  height: 100%;
}
.animativadas-23~label {
  position: absolute;
  left: 14px;
  width: 100%;
  top: 10px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}
.animativadas-23:focus~label,
.has-content.animativadas-23~label {
  top: -18px;
  left: 0;
  font-size: 12px;
  color: #2f2d2d;
  transition: 0.3s;
}
.animativadas-24~.focus-bg:before,
.animativadas-24~.focus-bg:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  background-color: #ededed;
  transition: 0.3s;
  z-index: -1;
}
.animativadas-24:focus~.focus-bg:before,
.has-content.animativadas-24~.focus-bg:before {
  transition: 0.3s;
  width: 50%;
  left: 0;
  top: 0;
  height: 100%;
}
.animativadas-24~.focus-bg:after {
  left: auto;
  right: 50%;
  top: auto;
  bottom: 50%;
}
.animativadas-24:focus~.focus-bg:after,
.has-content.animativadas-24~.focus-bg:after {
  transition: 0.3s;
  width: 50%;
  height: 100%;
  bottom: 0;
  right: 0;
}
.animativadas-24~label {
  position: absolute;
  left: 14px;
  width: 100%;
  top: 10px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}
.animativadas-24:focus~label,
.has-content.animativadas-24~label {
  top: -18px;
  left: 0;
  font-size: 12px;
  color: #2f2d2d;
  transition: 0.3s;
}

$(window).load(function(){
$(".col-3 input").val("");

$(".input-effect input").focusout(function(){
if($(this).val() != ""){
$(this).addClass("has-content");
}else{
$(this).removeClass("has-content");
}
})
});