CSS 在页面加载时淡入，在悬停时淡出

Question

有人知道如何让缩略图在页面加载时淡入淡出并在悬停时淡出到半透明吗？

我是 CSS 过渡和动画的新手。非常感谢您的帮助!

这是我用于缩略图淡入的 CSS:

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:0.5s;
    -moz-animation-duration:0.5s;
    animation-duration:0.5s;
}
.fade-in.one {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.fade-in.two {
-webkit-animation-delay: 0.4s;
-moz-animation-delay:0.4s;
animation-delay: 0.4s;
}
.fade-in.three {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.fade-in.four {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.fade-in.five {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
} 
.fade-in.six {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}

Answer 1

试试我放在一起的这个例子。它使用动画使元素淡入淡出，然后使用 css 过渡更改悬停时的不透明度。

这真的应该用 javascript 来完成，但这里有一个纯 css 解决方案。如果您想添加更多元素，只需复制其中一个“fade_item_[x]”类并更改时间即可。

纯 CSS 版本

CSS:

.blocky_text{
    background-color:#229922;
    display:inline-block;
    /*for hover transition */
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.blocky_text:hover{
    opacity:0.5;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

.fade_item_1{
    -webkit-animation: fadein 0.5s; /* Safari and Chrome */
    -moz-animation: fadein 0.5s; /* Firefox */
    -ms-animation: fadein 0.5s; /* Internet Explorer */
    -o-animation: fadein 0.5s; /* Opera */
    animation: fadein 0.5s;
}

.fade_item_2{
    -webkit-animation: fadein 0.8s; /* Safari and Chrome */
    -moz-animation: fadein 0.8s; /* Firefox */
    -ms-animation: fadein 0.8s; /* Internet Explorer */
    -o-animation: fadein 0.8s; /* Opera */
    animation: fadein 0.8s;
}

.fade_item_3{
    -webkit-animation: fadein 1.1s; /* Safari and Chrome */
    -moz-animation: fadein 1.1s; /* Firefox */
    -ms-animation: fadein 1.1s; /* Internet Explorer */
    -o-animation: fadein 1.1s; /* Opera */
    animation: fadein 1.1s;
}

.fade_item_4{
    -webkit-animation: fadein 1.4s; /* Safari and Chrome */
    -moz-animation: fadein 1.4s; /* Firefox */
    -ms-animation: fadein 1.4s; /* Internet Explorer */
    -o-animation: fadein 1.4s; /* Opera */
    animation: fadein 1.4s;
}

HTML:

<p class="fade_item_1 blocky_text"> An example. </p>
<p class="fade_item_2 blocky_text"> An example. </p>
<p class="fade_item_3 blocky_text"> An example. </p>
<p class="fade_item_4 blocky_text"> An example. </p>

这是一个 JSFiddle 的工作原理: http://jsfiddle.net/DFcb9/1/

JQUERY 版本

CSS:

.blocky_text{
    background-color:#229922;
    display:inline-block;
    opacity:0;    
}

.hoverable{
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.hoverable:hover{
    opacity:0.5 !important;
}

JQUERY:

$(document).ready(function(){
    fadeInGroup('.blocky_text'); 
});

function fadeInGroup(group){
$(this).css("opacity","0");
$(group).each(function(index, element) {    
    var d = (130 * (index)).toString()
    $(this).delay(d).fadeTo(1200,1,function(){
        $(this).addClass("hoverable");
    });
});

HTML:

<p class="blocky_text"> An example. </p>
<p class="blocky_text"> An example. </p>
<p class="blocky_text"> An example. </p>
<p class="blocky_text"> An example. </p>
<p class="blocky_text"> An example. </p>
<p class="blocky_text"> An example. </p>

使用此版本，您可以根据需要继续添加任意数量的文本，并且它们会正确淡入。 Jquery 循环遍历类为“blocky_text”的元素，并为每个元素添加不同的开始延迟。

然后您可以添加一组全新的给定类的元素，并通过复制添加 opacity:0 in the css 和 fadeInGroup('.classname'); 来引入它们。到 jquery 文档加载。

这是这个工作的一个 jsfiddle: http://jsfiddle.net/utKa5/1/