Animate text image fill

animate-text-image-fill.markdown

Animate text image fill

Tutorial at: http://carolinabatista.com/posts/animated-image-text-fill-with-css3 (Em português: http://carolinabatista.com/posts/texto-com-imagem-animada-usando-css3)

A Pen by Erreur32 on CodePen.

License.

index.html

<div class="container-text">
   EchoSystem
</div>

style.css

@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;
}