CSS 전환이 적용된 div 클래스가 나타 납니까?

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/