Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Animate text image fill
<div class="container-text">
EchoSystem
</div>
@import url('https://fonts.googleapis.com/css?family=Bungee');
@keyframes filling {
from{
background-position: center 25%;
}
to {
background-position: center 50%;
}
}
.container-text {
background-image: url(https://static.pexels.com/photos/4827/nature-forest-trees-fog.jpeg);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
color: #FFFFFF;
padding-top: 20px;
font-size: 170px;
font-family: 'Bungee', cursive;
animation: filling 3s ease forwards;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment