<!DOCTYPE HTML><HTMLLang= "en"><Head><MetaCharSet= "UTF-8"><title>Document</title><styletype= "Text/css">. Container{margin:100px;position:relative;}input{Border:1px solid #999;Outline:0;width:140px;Height:30px;Line-height:30px;Border-radius:5px;transition:text-indent. 3s;text-indent:36px;}Span.title{position:Absolute; Left:2px;Top:1px;Height:30px;Line-height:30px;transition:transform. 3s}Input:focus,input:hover{text-indent:2px;}Input:focus+span.title,input:hover+span.title{Transform:TranslateX ( -2.2EM);}Input:valid~label::after{content:"correct"}Input:invalid~label::after{content:"Error"}Input:valid{Border:1px solid Green;}Input:invalid{Border:1px solid Red;}</style></Head><Body> <Divclass= "Container"> <inputtype= "Email"ID= "Mail"Required Placeholder= "Enter Mailbox"> <spanclass= "title">Mailbox</span> <label for= "Mail"></label> </Div></Body></HTML>
H5 form CSS3 Slide animation