</ 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
<!-- 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>
Only tabs with a " " have code.
Only tabs with a " " have code.
Only tabs with a " " have code.
Only tabs with a " " have code.
If you have already pasted this code into your project then you can skip this. If you haven't, and it's your first time using CodeCrumbs, then copy this code and navigate to your sites global settings > Custom Code tab > paste it into the <head> (first custom code block). It just needs to exist once.
How to use:
Tutorial Coming Soon!
Check Browser Support
Interactive Table

Contributor
CodeCrumbs Team
Short Description:
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.
Extra Info:
No extra info.
Clone Project
Documentation
Author:
Noah Raskin
Status:
Deprecated
New
Updated
This crumb is no longer being supported.
Latest Version:
More related crumbs..
Want to contribute to the community?
Tell us what code you're working with. We would love to see it and possibly add it to the library.