// Based on http://codepen.io/mildrenben/pen/gbddEj

label {
  display: block;
  padding-top: 3rem;
  margin-top: -3rem;
}

input::-webkit-input-placeholder {
  transition: all 0.3s ease-in-out;
}

input {
  width: 20rem;
  color: darken(teal, 20%);
  margin-bottom: 3rem;
  padding: 1rem 0;
  border: none {
    bottom: solid 1px teal;
  }
  background: {
    image: linear-gradient(to bottom, rgba(255,255,255,0) 96%, teal);
    position: -20rem 0;
    size: 20rem 100%;
    repeat: no-repeat;
  }
  transition: all 0.3s cubic-bezier(.64,.09,.08,1);
  &:focus, &:valid, &:invalid {
    box-shadow: none;
    outline: none;
  }
  &:focus, &:valid {
    background-position: 0 0;
    &::placeholder {
      color: teal;
      transform: translateY(-2rem);
      visibility: visible !important;
    }
  }
}

// Based on http://codepen.io/mildrenben/pen/gbddEj

label {
  display: block;
  padding-top: 3rem;
  margin-top: -3rem;
}

input {
  width: 20rem;
  color: darken(teal, 20%);
  margin-bottom: 3rem;
  padding: 1rem 0;
  border: none {
    bottom: solid 1px teal;
  }
  background: {
    image: linear-gradient(to bottom, rgba(255,255,255,0) 96%, teal);
    position: -20rem 0;
    size: 20rem 100%;
    repeat: no-repeat;
  }
  transition: all 0.3s cubic-bezier(.64,.09,.08,1);
  &:focus, &:valid, &:invalid {
    box-shadow: none;
    outline: none;
  }
  &:focus, &:valid {
    background-position: 0 0;
    &::placeholder {
      color: teal;
      transform: translateY(-2rem);
      visibility: visible !important;
    }
  }
  &::placeholder {
    transition: all 0.3s ease-in-out;
  }
}

Remove vendor prefix for ::placeholder css
Remove vendor prefix for ::placeholder css
