Animation Label Transition

Developer
Adrian Payne
Size
2,809 Kb
Views
26,312
  1. Animation Label Transition Previews
  2. Animation Label Transition HTML Codes
  3. Animation Label Transition CSS Codes

How do I make an animation label transition?

What is a animation label transition? How do you make a animation label transition? This script and codes were developed by Adrian Payne on 18 August 2022, Thursday.

Animation Label Transition Previews
IQ Test

Animation Label Transition - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animation Label Transition</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <fieldset> <input class="sick-field-brah" required /> <label class="woah-label">Your Name</label> </fieldset>
</div>
</body>
</html>

Animation Label Transition - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
* { box-sizing: border-box;
}
body { background: #071f20;
}
.wrapper { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/landscape-nature-clouds-cloudy-large.jpg); background-size: cover; margin: 40px auto; width: 800px; height: 500px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
fieldset { border: 0; font-size: 18px; font-family: 'Roboto'; font-weight: 300; padding: 30px; position: relative; width: 50%;
}
fieldset > * { display: block;
}
.sick-field-brah { background: rgba(255, 255, 255, 0.1); border: 0; border-bottom: 3px solid rgba(255, 255, 255, 0.3); color: #fff; padding: 10px 15px 7px 15px; width: 100%; height: 60px; -webkit-transition: all 175ms linear; transition: all 175ms linear;
}
.sick-field-brah:focus, .sick-field-brah:valid { outline: 0;
}
.sick-field-brah:focus + .woah-label, .sick-field-brah:valid + .woah-label { font-size: 14px; padding-top: 5px; padding-bottom: 5px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
.sick-field-brah:valid { border-color: rgba(34, 139, 34, 0.7);
}
.woah-label { color: rgba(255, 255, 255, 0.7); padding-left: 15px; position: absolute; pointer-events: none; -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0);
}
Animation Label Transition - Script Codes
Animation Label Transition - Script Codes
Home Page Home
Developer Adrian Payne
Username dazulu
Uploaded August 18, 2022
Rating 3
Size 2,809 Kb
Views 26,312
Do you need developer help for Animation Label Transition?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adrian Payne (dazulu) Script Codes
Name
Radio button label click select
Tile Game
CSS butterfly
A Pen by Adrian Payne
Simple Advent calendar with message
CSS 3D Rotate
Get Image Dimensions Client Side While Loading Image
CSS Shop Icon
CSS modal slide up animation with FB-ish zoom on scroll
Pure CSS RSS Icon
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!