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]'类并改变时间。

PURE CSS VERSION

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 VERSION

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”遍历项目，并为每个项目添加不同的启动延迟。

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

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

Answer 2

我认为你想使用-webkit-transition-property（及其等价物）而不是关键帧。

请参阅本教程以及大量示例：

http://ianlunn.co.uk/articles/hover-css-tutorial-introduction/

这是一个简单的例子（注意我需要嵌套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>

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

2 个答案: