Skip to content

Instantly share code, notes, and snippets.

@kayza-media

kayza-media/index.html

Created January 31, 2018 12:47
Show Gist options
  • Save kayza-media/de0ff78fe4b03fe14e791ad22c19c201 to your computer and use it in GitHub Desktop.
Save kayza-media/de0ff78fe4b03fe14e791ad22c19c201 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Only input field animation // source https://jsbin.com/foqixiy
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Only input field animation</title>
<style id="jsbin-css">
.field {
display: block;
position: relative;
}
.field__input{
width: 100%;
box-sizing: border-box;
background-color: #fff;
appearance: none;
border-radius: 0;
border-style: solid;
border-color: #f3f3f3;
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 3px solid #f3f3f3;
border-left-width: 0;
padding: 7px 10px;
font-family: inherit;
font-size: 100%;
color: inherit;
}
.field__input::-webkit-input-placeholder {
color: gray;
opacity: 0;
}
.field__input::-moz-placeholder{
color: gray;
opacity: 0;
}
.field__input:focus{
outline: none;
}
.field__input:focus::-webkit-input-placeholder{
transition: opacity .3s ease-out .3s;
opacity: 1;
}
.field__input:focus::-moz-placeholder{
transition: opacity .3s ease-out .3s;
opacity: 1;
}
.field__label-wrap{
height: 100%;
display: block;
}
.field__label{
position: absolute;
top: 8px;
left: 10px;
pointer-events: none;
font-size: .9em;
transition: top .3s cubic-bezier(0.9,-0.15, 0.1, 1.15), opacity .3s ease-out;
will-change: top, opacity;
}
.field__input:not(:placeholder-shown) ~ .field__label-wrap .field__label{
opacity: 0;
top: 7px;
}
.field__input:focus ~ .field__label-wrap .field__label{
opacity: 1;
top: -15px;
}
.field_type_input .field__label-wrap:before, .field_type_input .field__label-wrap:after{
content: "";
width: 0;
height: 3px;
background-color: red;
position: absolute;
bottom: 0;
will-change: width;
transition: width .3s ease-out;
}
.field_type_input .field__label-wrap:before{
left: 50%;
}
.field_type_input .field__label-wrap:after{
right: 50%;
}
.field_type_input .field__input:focus ~ .field__label-wrap:before,
.field_type_input .field__input:focus ~ .field__label-wrap:after{
width: 50%;
}
/** only wrapper | not neccesary **/
.page__section {
margin: 2rem;
font-family: sans-serif;
}
/** end **/
</style>
</head>
<body>
<div class="page__section">
<label class="field field_type_input">
<input class="field__input" placeholder="frontend-kings@tallence.com">
<span class="field__label-wrap">
<span class="field__label">Enter your e-mail</span>
</span>
</label>
</div>
<script id="jsbin-source-css" type="text/css">.field {
display: block;
position: relative;
}
.field__input{
width: 100%;
box-sizing: border-box;
background-color: #fff;
appearance: none;
border-radius: 0;
border-style: solid;
border-color: #f3f3f3;
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 3px solid #f3f3f3;
border-left-width: 0;
padding: 7px 10px;
font-family: inherit;
font-size: 100%;
color: inherit;
}
.field__input::-webkit-input-placeholder {
color: gray;
opacity: 0;
}
.field__input::-moz-placeholder{
color: gray;
opacity: 0;
}
.field__input:focus{
outline: none;
}
.field__input:focus::-webkit-input-placeholder{
transition: opacity .3s ease-out .3s;
opacity: 1;
}
.field__input:focus::-moz-placeholder{
transition: opacity .3s ease-out .3s;
opacity: 1;
}
.field__label-wrap{
height: 100%;
display: block;
}
.field__label{
position: absolute;
top: 8px;
left: 10px;
pointer-events: none;
font-size: .9em;
transition: top .3s cubic-bezier(0.9,-0.15, 0.1, 1.15), opacity .3s ease-out;
will-change: top, opacity;
}
.field__input:not(:placeholder-shown) ~ .field__label-wrap .field__label{
opacity: 0;
top: 7px;
}
.field__input:focus ~ .field__label-wrap .field__label{
opacity: 1;
top: -15px;
}
.field_type_input .field__label-wrap:before, .field_type_input .field__label-wrap:after{
content: "";
width: 0;
height: 3px;
background-color: red;
position: absolute;
bottom: 0;
will-change: width;
transition: width .3s ease-out;
}
.field_type_input .field__label-wrap:before{
left: 50%;
}
.field_type_input .field__label-wrap:after{
right: 50%;
}
.field_type_input .field__input:focus ~ .field__label-wrap:before,
.field_type_input .field__input:focus ~ .field__label-wrap:after{
width: 50%;
}
/** only wrapper | not neccesary **/
.page__section {
margin: 2rem;
font-family: sans-serif;
}
/** end **/
</script>
</body>
</html>
Raw
jsbin.foqixiy.css
.field {
display: block;
position: relative;
}
.field__input{
width: 100%;
box-sizing: border-box;
background-color: #fff;
appearance: none;
border-radius: 0;
border-style: solid;
border-color: #f3f3f3;
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 3px solid #f3f3f3;
border-left-width: 0;
padding: 7px 10px;
font-family: inherit;
font-size: 100%;
color: inherit;
}
.field__input::-webkit-input-placeholder {
color: gray;
opacity: 0;
}
.field__input::-moz-placeholder{
color: gray;
opacity: 0;
}
.field__input:focus{
outline: none;
}
.field__input:focus::-webkit-input-placeholder{
transition: opacity .3s ease-out .3s;
opacity: 1;
}
.field__input:focus::-moz-placeholder{
transition: opacity .3s ease-out .3s;
opacity: 1;
}
.field__label-wrap{
height: 100%;
display: block;
}
.field__label{
position: absolute;
top: 8px;
left: 10px;
pointer-events: none;
font-size: .9em;
transition: top .3s cubic-bezier(0.9,-0.15, 0.1, 1.15), opacity .3s ease-out;
will-change: top, opacity;
}
.field__input:not(:placeholder-shown) ~ .field__label-wrap .field__label{
opacity: 0;
top: 7px;
}
.field__input:focus ~ .field__label-wrap .field__label{
opacity: 1;
top: -15px;
}
.field_type_input .field__label-wrap:before, .field_type_input .field__label-wrap:after{
content: "";
width: 0;
height: 3px;
background-color: red;
position: absolute;
bottom: 0;
will-change: width;
transition: width .3s ease-out;
}
.field_type_input .field__label-wrap:before{
left: 50%;
}
.field_type_input .field__label-wrap:after{
right: 50%;
}
.field_type_input .field__input:focus ~ .field__label-wrap:before,
.field_type_input .field__input:focus ~ .field__label-wrap:after{
width: 50%;
}
/** only wrapper | not neccesary **/
.page__section {
margin: 2rem;
font-family: sans-serif;
}
/** end **/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment