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

Answer 2

您使用的是jQuery吗？

如果是这样，内置了一些动画，可以在以下链接找到：

http://api.jquery.com/category/effects/

如果你不使用jQuery，这里是一个CSS3 HTML5动画演示：

http://www.script-tutorials.com/css3-fade-slider/

出现带有css过渡的div类？

2 个答案: