Custom Placeholder Animation

Code Crumbs

General

</ head>

<!-- Input Field Placeholder Animation --> 
<style>
  ::placeholder {
  	transition: all 350ms ease;
  }
  
  .your-input-class:focus::placeholder {
  	transform: translate(20px, 0);
    opacity: 0.0;
  }
  
  .your-textarea-class:focus::placeholder {
  	transform: translate(20px, 0);
    opacity: 0.0;
  }
</style>

</ body>

HTML/Embed

Author
Noah Raskin
Published
Dec 16, 2019

How to use:

This small snippet allows you to animate or add a transition to your placeholder text when an input field is focused. You can expand on the transition animations to whatever you'd like.

Clone Project
Documentation
Author:
Contributor Crumbs
Built by
Built with
Thank you! Your submission has been received!
Close Form
Oops! Something went wrong while submitting the form.
Become a Contributor