<hr class="trans--grow hr1">
<p> Animate the hr , with the use of <strong>jQuery<strong> and <strong>Css3<strong></p>
<hr class="trans--grow hr2">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<footer>
<div>
<h1>By <a href="https://plus.google.com/+BusuttilNicolas">Nicolas Busuttil</a></h1>
</div>
</footer>
body{
width:960px;
margin: 0 auto;
background:#545454;
font-family:Helvetica, sans-serif;
}
p{
text-align: center;
font-size:2rem;
color:#cccccc;
}
.trans--grow{
transition: width 1s ease-out; /* For Safari 3.1 to 6.0 */
transition: width 1s ease-out;
width : 0%;
}
.grow{
width:100%;
}
.hr1{
margin-left:0;
}
.hr2{
margin-right:0;
}
hr{
margin-top: 20px;
padding: 2px 0;
border: none;
background-color: rgb(250, 150, 0);
letter-spacing: 5px;
}
/*Author*/
footer{
position:absolute;
bottom:0;
}
div{
width:960px;
}
h1{
font-size:1.2rem;
text-align: center;
color:#39d1b4;
}
h1 a{
font-weight:300;
color:#39d1b4;
text-decoration:none;
}
h1 a:hover{
font-weight:300;
color:#2d9884;
text-decoration:none;
}
jQuery(document).ready(function($){
setTimeout(function(){
$('.trans--grow').addClass('grow');
}, 275);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.