input animation MyApp Author name 1.0 Desktop False 640 480 False False False WebApp False C:\Users\Asmat\Documents\VisualNeoWeb\Libraries\img\default-icon.png .box input{ width:100%; height:100%; padding-top:20px; border:none; outline:none; } .box label{ position:absolute; left:0%; bottom:0px; width:100%; height:100%; pointer-events:none; color:gray; border-bottom:1px solid gray; } .box label::after{ content:""; left:0px; bottom:-1px; position:absolute; height:100%; width:100%; border-bottom:3px solid #6994b7; transform:translateX(-100%); transition:transform 0.3s ease; } .content-name{ position:absolute; bottom:5px; left:0px; transition: all 0.3s ease; } .box input:focus + .label-name .content-name, .box input:valid + .label-name .content-name{ transform:translateY(-150%); font-size:14px; color:#56a4d8; } .box input:focus + .label-name::after, .box input:valid + .label-name::after{ transform:translateX(0%); } en #000000 [AndroidOS,iOS,WindowsPhoneOS] normal True True False True True False False True False False 177px 80px 300px 60px box <input type="text" name="name" required ng-model="$root.name" /> <label for="name" class="label-name"> <span class="content-name">Name</span> </label> 177px 192px 300px 60px box <input type="text" name="name" required ng-model="$root.lastname" /> <label for="name" class="label-name"> <span class="content-name">LastName</span> </label> 240px 328px 161px 44px Login primary 20px 440px 400px 30px Info: [name] - [lastname] 0px 0px 640px 480px False