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

所以...我在轮播中的幻灯片中有三个div类。
现在，对于普通元素，我具有display：none；对于具有.current类的元素，我具有display：block，如下所示：

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


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

它可以工作，但是只是“弹出”，我想淡化外观。
我也有一个标题，当前该标题会向下移动，我也想为其添加动画或淡入淡出。

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

谢谢

最佳答案

只需将此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;
    }
}