HTML CSS examples for CSS Animation:Text
CSS: hover over div to animate text-decoration
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .module-link{<!-- w w w .j a v a 2 s . c o m--> font-size:20px; float:left; width:108px; height:180px; margin:20px; padding:20px; background: #CDCDCD; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border:1px solid #b1b1b1; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .module-link:hover { cursor: pointer; background: #EDEDED; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .module-link label{ text-align:center; font-variant: small-caps; left:0; right:0; margin:auto; display: block; margin-bottom: 25px; } .module-link img{ left:0; right:0; margin:auto; width:100px; display: block; } .module-link a{ text-decoration:none; color:#000; display:inline; } .module-link a:after{ content: ''; display: block; border-bottom: 1px solid #000; width: 0; -webkit-transition: 0.5s ease; transition: 0.5s ease; } .module-link:hover a:after { width: 100%; } </style> </head> <body> <div class="module-link" id="test1"> <label> <a href="">this is a test</a> </label> </div> </body> </html>