CSS转换只对元素淡入 [英] CSS transition fade in only for element

问题描述

有没有办法只使用CSS transition属性来淡化元素？从来没有真正需要这个之前，所以没有看着它，现在我似乎找不到这样做的方法，而不诉诸JS。是否可以设置转换以具有立即返回状态？

Is there a way to only fade in an element using the CSS transition property? Never really had the need for this before so haven't looked into it, and now I can't seem to find a method of doing so without resorting to JS. Is it possible to set transition to have an immediate return state?

推荐答案

有几种方法可以做到这一点，希望您的淡入淡出发生：

There a couple ways to do this, depending on when you want your fade in to occur:

jsFiddle

jsFiddle

/***** Fade in on a page load *****/
.fadeInLoad {
    border: 1px solid #48484A;
    font-size: 40px;
    animation: fadeInLoad 5s;
}
@keyframes fadeInLoad {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

/***** Fade in child when parent hovered *****/
.fadeIn {
    border: 1px solid #48484A;
    font-size: 18px;
    opacity:0;  
    -webkit-transition : all 2s ease-out;
    -moz-transition : all 2s ease-out;
    -o-transition : all 2s ease-out;
    transition : all 2s ease-out;
}
.thisText:hover .fadeIn {
    opacity: 1; 
}

注意：要在页面加载时淡入，需要一个简单的关键帧动画转换。

Note: to fade in on page load you need a simple keyframe animation, not a transition.

这篇关于CSS转换只对元素淡入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！