HTML CSS examples for CSS Animation:Text
CSS transition hover to show typing letter animation
<html> <head> <title>Lorem ipsum dolor sit amet, con</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style id="compiled-css" type="text/css"> .siteBtnShare {<!--from w w w . j a v a 2 s .com--> background:Chartreuse; display:inline-block; padding:11px; height:21px; width:auto; color:yellow; } .siteBtnShare:hover .share-text-wrapper .share-text { width:100%; } .label { display:inline-block; width:2em; color:blue; } .share-text-wrapper { display:inline-block; white-space:nowrap; margin-left:-2em; padding-left:2em; } .share-text-wrapper .share-text { display:inline-block; width:0%; overflow:hidden; -webkit-transition:width 2s ease-in-out; -moz-transition:width 2s ease-in-out; -o-transition:width 2s ease-in-out; transition:width 2s ease-in-out; } </style> </head> <body> <div class="siteBtnShare"> <span class="label"> <i class="fa fa-share-alt" aria-hidden="true"></i> </span> <div class="share-text-wrapper"> <div class="share-text"> Lorem ipsum do </div> </div> </div> </body> </html>