徐々にcss3を使用してテキストの下にイメージを表示

Question

私はcss3を使用してバックグラウンドクリップのための次のコードを持っています。私はアニメーションを使用してテキストが最終的に白くなり、背景が同時に現れるようにしようとしています。しかし、私はそれを正しくすることはできません。ちょうどCSSでこれを行うことさえ可能ですか？

.text { 
 
    background-image: url('images/car.jpg'); 
 
    font-size: 90px; 
 
    -webkit-text-fill-color: transparent; 
 
    -webkit-background-clip: text; 
 
    text-fill-color: transparent; 
 
    background-clip: text; 
 
    animation-name: flip; 
 
    animation-duration: 4s; 
 
    animation-timing-function: linear; 
 
    animation-fill-mode: forwards; 
 
} 
 
@keyframes flip { 
 
    0% { 
 
    background-image: url('images/car.jpg'); 
 
    font-size: 250px; 
 
    -webkit-text-fill-color: transparent; 
 
    -webkit-background-clip: text; 
 
    text-fill-color: transparent; 
 
    background-clip: text; 
 
    } 
 
    100% { 
 
    color: #fff; 
 
    background-image: url('images/car.jpg'); 
 
    font-size: 200px; 
 
    } 
 
}

<div class="text"><b>Lorem Ipsum</b> 
 
</div>

Answer 1

あなたがミックスブレンドモードを見てみることがあります。一緒にプレイする

body {margin:0;} 
 

 
.text { 
 
    min-height:100vh; 
 
    background-image: url('http://blog.hdwallsource.com/wp-content/uploads/2015/05/toy-car-wallpaper-39199-40102-hd-wallpapers.jpg'); 
 
    background-size:cover; 
 
    font-size: 20vw; 
 
    
 
} 
 
b { 
 
    display:inline-block; 
 
    box-shadow:inset 0 0 0 1000px white, 0 0 0 1000px white; 
 
    mix-blend-mode:screen; 
 
    animation: flip 4s linear forwards; 
 
} 
 
@keyframes flip { 
 
    
 
    75% { 
 
    
 
    color: #fff; 
 
    } 
 
    100% {  
 
    color: #fff; 
 
    font-size: 15vw; 
 
    box-shadow:inset 0 0 0 1000px rgba(255,255,255,0), 0 0 0 2000px rgba(255,255,255,0); 
 
    } 
 
}

<div class="text"><b>Tiny mini</b> 
 
</div>

ペン：http://codepen.io/gc-nomade/pen/rWrvKP