元素的动画不透明度 [英] Animate opacity of an element

问题描述

如何使用CSS或jQuery对元素的不透明度"进行动画处理?

How would one go about animating the "opacity" of an element using CSS or jQuery?

推荐答案

可以，使用CSS过渡:

Sure, using CSS transitions:

div {
    opacity: 1;
    -moz-transition: all 0.3s ease-out;    /* FF4+ */
    -o-transition: all 0.3s ease-out;      /* Opera 10.5+ */
    -webkit-transition: all 0.3s ease-out; /* Safari 3.2+, Chrome */
    -ms-transition: all 0.3s ease-out;     /* IE10+ */
    transition: all 0.3s ease-out;         /* standard format */
}

div:hover {
    opacity: 0.3;    
}

<div>Hover over me with your mouse!</div>
<div>Hover over me with your mouse!</div>
<div>Hover over me with your mouse!</div>
<div>Hover over me with your mouse!</div>
<div>Hover over me with your mouse!</div>
<div>Hover over me with your mouse!</div>

这篇关于元素的动画不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！