Can I achieve an animated background clip effect with CSS3? I have attempted to create an animation where the text changes to white while simultaneously revealing the background, but I haven't been successful. Is it possible to accomplish this using only 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>