애니메이션 -webkit-텍스트 채우기 색

Question

내가 때문에 -webkit의 호환성 문제의 투명 색상을 설정 캔트

a { 
    color: #fff; 
    -webkit-text-fill-color: rgba(255,255,255,0); 
    -webkit-text-stroke-width: 2px; 
    -webkit-text-stroke-color: #fff; 
    -webkit-text-stroke: 2px white; 
    -webkit-transition: all .5s ease-out; 
    -moz-transition: all .5s ease-out; 
    -o-transition: all .5s ease-out; 
    transition: all .5s ease-out; 
    } 
a:hover { 
    -webkit-text-fill-color: rgba(255,255,255,1); 
} 

-webkit-텍스트 채우기 색을 사용하여 텍스트의 투명도를 애니메이션 시도 IE에서 -ext-fill-color 및 -webkit-text-stroke.

Answer 1

내 Mac에서 그것을 테스트하기 위해 IE 브라우저가없는 죄송합니다,이 코드

당신의 배경은`텍스트 shadow`를 사용할 수있는 고체 반이면

a { 
 
    
 
    color: #d5d5d5; 
 
    -webkit-text-fill-color: rgba(225,255,255,0); 
 
    -webkit-text-stroke-width: 2px; 
 
    -webkit-text-stroke-color: #d5d5d5; 
 
    -webkit-text-stroke: 2px #d5d5d5; 
 
    -webkit-transition: all .5s ease-out; 
 
-moz-transition: all .5s ease-out; /*gecko*/ 
 
-ms-transition: all .5s ease-out; /*IE10*/ 
 
-o-transition: all .5s ease-out; /*opera 11.10+*/ 
 
-pie-transition: all .5s ease-out; /*PIE*/ 
 
    transition: all .5s ease-out; 
 
    } 
 
a:hover { 
 
    color: #000; 
 
    -webkit-text-fill-color: rgba(255,255,255,1); 
 
    -webkit-text-stroke-width: 2px; 
 
    -webkit-text-stroke-color: #000; 
 
-moz-transition: all .5s ease-out; /*gecko*/ 
 
-ms-transition: all .5s ease-out; /*IE10*/ 
 
-o-transition: all .5s ease-out; /*opera 11.10+*/ 
 
-pie-transition: all .5s ease-out; /*PIE*/ 
 
    transition: all .5s ease-out; 
 
}

<a href="#">Test</a>