CODEWITHSUNDEEP
htmlcss
Developer Ali
Developer Ali

Reputation: 23

how to add fade out effect in Div of text in HTML5

I have text div i want fadeout effect on this when page loads or when div is loaded i have following html code on which i want to perform this 

<div class="text_paragraph">
    <p>Bovine Respiratory Disease (BRD) is the leading cause of economic 
       loss in the beef industry. <small>1, 2</small></p>
</div>

Upvotes: 2

Views: 18121

Answers (2)

sandeep
sandeep

Reputation: 92863

You can do this with CSS3. Write like this:

.text_paragraph >p{
    -webkit-animation: fadi 5s 1;
}
@-webkit-keyframes fadi {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@-moz-keyframes fadi {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

Check this http://jsfiddle.net/TPsb7/2/

Upvotes: 3

Sampson
Sampson

Reputation: 268492

Fading an element out is generally not done with pure HTML. You can do it with CSS, however by and large it's done with the help of a library like jQuery which permits you the luxury of performing complicated animations and effects with minimal code.

$(document).ready(function(){
  $(".text_paragraph").fadeOut();
});

The above code will fade out your div as soon as the document is finished loading.

Upvotes: 1

Related Questions