1

だから...カルーセルのスライド内に3つの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;
}

ありがとう

4

2 に答える 2

4

この 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; 
    }       
}
于 2013-08-09T17:45:56.697 に答える