mix-blend-modeのアニメーションテキストの塗りつぶし

Question

".box-with-text"の "background-color"を取り除くと、テキストの塗りつぶしがうまくいかないという問題がありました。

.box-with-text { 
    text-transform: uppercase; 
    font: bold 6rem Open Sans, Impact; 
    background: black; 
    color: white; 
    mix-blend-mode: multiply; 
} 

@keyframes stripes { 
    to { 
    background-size:100% 100%; 
    } 
} 
.wrapper { 
    max-width: 300px; 
    margin: 0 auto; 
} 
.container { 
    display: flex; 
    background: linear-gradient(crimson , crimson) white no-repeat 0 0; 
    background-size: 0 100%; 
    animation: stripes 5s; 
    animation-fill-mode: forwards; 
    text-align: center; 
} 

Codepen

Answer 1

私はここに「動作しない」あなたは何を意味を推測し、あなたが探していることは赤で埋めます白い背景に白い文字を持つことであると仮定していますアニメーションで（これはあなたがやろうとしていることではないことを説明するためにあなたの質問に展開してください）。

あなたはこの効果を達成するために異なるブレンドモードを使用する必要があります、あなたは前景色黒と背景の白とスクリーンブレンドモードを使用することによって、これを取得することができます：

.box-with-text { 
    text-transform: uppercase; 
    font: bold 6rem Open Sans, Impact; 
    background: white; 
    color: black; 
    mix-blend-mode: screen; 
} 

を参照してください：http://codepen.io/Godwin/pen/oLYYvr?editors=1100