Edit in JSFiddle

body {
	width: 100%;
  min-height: 100vh;
	padding-bottom: 150px;
  background-image: linear-gradient(45deg, #F7CAC9 15%, #91A8D0 85%);
}


.h1 {
  margin: 2em;
  font-family: 'Dancing Script', cursive;
  color: rgba(white, .85);
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}


.inner {
	min-width: 300px;
}

@keyframes input-wave {
  from {
    background-position: 0px bottom
  }

  to {
    background-position: 18px bottom
  }
}

.input {
  display: block;
	width: 100%;
	padding: 0 0 .5em;
  font-size: 2rem;
	font-family: 'Dancing Script', cursive;
	color: rgba(white,.9);
  letter-spacing: 0.05em;
  background: none;
  border: none;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAYAAAC5Sw6hAAAA7UlEQVQoU63RvS6EQRTG8d9Bo0An3INGqLdyExIXQCJCITqNiEh2dRKFxhUoxA24CVGsRIlC5yOKI7MZyesNsRHTzTnP+c9zngn/dCIzL7AZEf2/MDNzCQcFlHjD4aAQ8ToMMDNn0cNy0RfQPabr8C02IuLyJ1hmjmIN+5isun4BTWC3rIex2jjHVkTcNYGZuYgTLNT6E3ZwGp/CzJzDMTq19ow9HGG8OihORmr/DNsR8ThYrfViua+g21j3BlOYqdprrEbEVXP2C6jhrgyWDJoOXqrDbkS8tzP8FtQAztdMHrDezuxXR8N8f1vzAVRZR6b5NCddAAAAAElFTkSuQmCC");
  background-repeat: repeat-x;
  background-position: 0 bottom;
  animation: input-wave 0.4s linear infinite;
	//
	+ .input {
		margin-top: 1em;
	}
	//
	&:focus {
		animation: 0;
	}
}

::-webkit-input-placeholder {
  text-transform: uppercase;
  color: rgba(white,.6);
  font-weight: 600;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}