CSS 전환 페이드 방향

Question

나는 CSS 전환을 어지럽히고 원하는 효과를 얻는데 어려움이 있습니다.

내 생각은 일부 텍스트를 배경과 효과적으로 같은 색으로 보이게하여 텍스트 위에 이미지를 배치하고 이미지를 왼쪽에서 오른쪽으로 옮길 것입니다. 그런 다음 이미지가 텍스트의 문자 위로 전달되면 그 문자가 페이드 인 될 수 있도록 전환을 동기화하려고했습니다. 효과적으로 이미지가 텍스트를 "숨기는"것처럼 보이게 만듭니다.

이미지가 잘 변형되고 텍스트가 실제로 사라집니다. 텍스트가 한꺼번에 사라지는 것입니다. 왼쪽에서 오른쪽으로 텍스트 번역이 희미해질 수 있습니까?

CSS를 사용할 수 없다면 사용 방법을 알아야합니까?

편집 : 일부 코드 추가.

여기

#topbar 
{ 
background-color:#EEEEE0; 
background: linear-gradient(to right, #EEEEE0,#EEDC82); 
display: block; 
width: 100%; 
margin-left:250px; 
padding: 30px; 
border-radius:25px; 
} 


#headertext 
{ 
color: #EEEEE0; 
transition: color 2s ease .1s; 
} 

#rocket 
{ 
display:block; 
position:absolute; 
top:55px; 
transition: all 3s ease .1s; 
} 

#topbar:hover #rocket 
{ 
-webkit-transform: translate(800px, 0); 
} 

#topbar:hover #headertext 
{ 
color:black; 
} 

가 사전에 감사합니다 CSS입니다.

Answer 1

나는 그의 문제가 해결 된 이후 나의 대답을 대답으로 올리겠다.

CSS fade left to right

Answer 2

CSS는 문자 단위로 규칙을 정의 할 수있는 방법이 없으므로 문자를 올바르게 이해하는 데 필요합니다. 내가 생각할 수있는 가장 좋은 방법은 주어진 텍스트 문자열을 통과하고 스팬의 각 문자를 감싸는 자바 스크립트를 작성한 다음 지연 시간이 길어질 때 각각에 transiton 스타일을 할당하여 멋지게 애니메이트하도록하는 것입니다. 운 좋게도 나는 이것을 전에했다! 더 완벽한 의미에서

http://dl.dropboxusercontent.com/u/23451438/textfade/index.html

그것은 없다, 나는 웹킷하지만 아무것도 접두사 값을 설정하고 있지 않다, 그러나 희망은 당신이 시작하는 것입니다.