css - 出现带有 css 转换的 div 类？

Question

所以...我在旋转木马的幻灯片中有三个 div 类。 现在我有一个 display:none 用于普通元素和 display:block 用于具有 .current 类的元素，如下所示:

p.readmore,.logo,.slidetxt{
display: none;
}


.current p.readmore, .current .logo, .current .slidetxt{
display: block;
} 

它有效，但它只是“弹出”，我想淡化外观。 我还有一个标题在当前时向下移动，我也想在那个标题中设置动画或淡出。

.current h1.carousel-title{
margin-top: 200px;
} 

谢谢

Answer 1

只需将此 css 样式添加到当前类即可。我建议您使用不透明度而不是显示来切换幻灯片的显示。

.slide { opacity: 0; }

.slide.current {
    opacity: 1;
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn; 
    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     
    visibility: visible !important; 
}

@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        transform: scale(1.1);  
    }
    80% {
        transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        transform: scale(1);
        opacity: 1; 
    }       
}

@-webkit-keyframes fadeIn {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        -webkit-transform: scale(1.1);
    }
    80% {
        -webkit-transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        -webkit-transform: scale(1);
        opacity: 1; 
    }       
}