如何在HTML5中添加淡入淡出效果 [英] how to add fade out effect in Div of text in HTML5

问题描述

我有文本div我希望在页面加载或div加载时对此有淡出效果我有以下html代码，我想在其中执行此操作

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>

推荐答案

你可以用CSS3做到这一点。这样写：

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; }
}

检查 http://jsfiddle.net/TPsb7/2/

这篇关于如何在HTML5中添加淡入淡出效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！