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

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

我不熟悉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;
}

---

试试我组合的这个例子。它使用动画在项目中淡入淡出，然后使用css转换更改悬停时的不透明度

这确实应该用javascript来完成，但这里有一个纯css解决方案。如果要添加更多项目，只需复制一个“淡入淡出项目”类并更改时间

纯CSS版本

CSS:

HTML:

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:

一个例子

一个例子

一个例子

一个例子

一个例子

一个例子

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

然后，您可以添加给定类的一组全新的项，并通过复制css和fadeInGroup（'.classname'）中的添加不透明度来引入它们；加载jquery文档

以下是这项工作的一部分：

---

我想您应该使用-webkit transition属性（及其等价物）而不是关键帧

请参见本教程以及许多示例：

下面是一个简单的例子（请注意，我需要嵌套div，因为关键帧覆盖了转换）——可能有一种更优雅的方法来实现这一点，但我没有花时间去寻找它：

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

    @-webkit-keyframes enter { from { opacity:1; } to { opacity: 0.5; } }
    @-webkit-keyframes leave { from { opacity:0.5; } to { opacity: 1; } }

    .fade-in {
        opacity:0;  /* make things invisible upon start */
        -webkit-animation:fadeIn ease-in 1;
        -webkit-animation-fill-mode:forwards;
        -webkit-animation-duration:1s;

    }

    .ghost {
        -webkit-transition-duration: 0.25s;
        -webkit-transition-property: opacity;
    }

    .ghost:hover {
        opacity: 0.5;
    }
</style>
<div class="fade-in">
    <div class="ghost">
        Mouse Over Me!
    </div>
</div>

@-webkit关键帧fadeIn{从{opacity:0；}到{opacity:1；}}
@-moz关键帧fadeIn{从{opacity:0；}到{opacity:1；}}
@关键帧fadeIn{从{opacity:0；}到{opacity:1；}}
@-webkit关键帧输入{from{opacity:1；}到{opacity:0.5；}}
@-webkit关键帧离开{from{opacity:0.5；}到{opacity:1；}}
.淡入{
不透明度：0；/*开始时使事物不可见*/
-webkit动画：fadeIn轻松1；
-webkit动画填充模式：正向；
-webkit动画持续时间：1s；
}
.鬼魂{
-webkit转换持续时间：0.25s；
-webkit转换属性：不透明度；
}
.幽灵：悬停{
不透明度：0.5；
}
老鼠在我身上！

这太棒了！非常感谢。你知道如何错开淡色吗？我希望几个不同的项目开始褪色，在几分之一秒后的其他。再次感谢你花了这么多时间在这件事上。我真的很感激。：）我想交错的图像缩略图，因为他们淡入像这样，然后我希望他们淡入不透明度约50%悬停。这就是让我感到困惑的原因。我尝试将一些css和动画结合起来，但效果不好。非常感谢您提供的任何帮助。@user3011183为您更新了它，不用担心，您可能应该使用javascript/jquery来实现这一点，尽管您可以在这里查看两个更好的教程：

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

$(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");
    });
});

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

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

    @-webkit-keyframes enter { from { opacity:1; } to { opacity: 0.5; } }
    @-webkit-keyframes leave { from { opacity:0.5; } to { opacity: 1; } }

    .fade-in {
        opacity:0;  /* make things invisible upon start */
        -webkit-animation:fadeIn ease-in 1;
        -webkit-animation-fill-mode:forwards;
        -webkit-animation-duration:1s;

    }

    .ghost {
        -webkit-transition-duration: 0.25s;
        -webkit-transition-property: opacity;
    }

    .ghost:hover {
        opacity: 0.5;
    }
</style>
<div class="fade-in">
    <div class="ghost">
        Mouse Over Me!
    </div>
</div>