Появляются классы div с css-переходами?

Question

Итак ... У меня есть три класса div внутри слайда в карусели. Прямо сейчас у меня есть дисплей: нет для нормальных элементов и дисплей: блок для элементов с .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/