<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-text"> Nature </div>

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