<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> UX works for <div class="dropping-texts"> <div>Developers</div> <div>Designers</div> <div>Coders</div> <div>EVERYONE!</div> </div>

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400'); body { margin:0px; text-align:center; padding-top:43vh; color:#fff; font-family:'Roboto'; font-size:36px; font-weight:100; overflow:hidden; animation:bg 5s linear infinite; } .dropping-texts { display: inline-block; width: 180px; text-align: left; height: 36px; vertical-align: -2px; } .dropping-texts > div { font-size:0px; opacity:0; margin-left:-30px; position:absolute; font-weight:300; box-shadow: 0px 60px 25px -20px rgba(0,0,0,0.5); } .dropping-texts > div:nth-child(1) { animation: roll 5s linear infinite 0s; } .dropping-texts > div:nth-child(2) { animation: roll 5s linear infinite 1s; } .dropping-texts > div:nth-child(3) { animation: roll 5s linear infinite 2s; } .dropping-texts > div:nth-child(4) { animation: roll2 5s linear infinite 3s; } @keyframes roll { 0% { font-size:0px; opacity:0; margin-left:-30px; margin-top:0px; transform: rotate(-25deg); } 3% { opacity:1; transform: rotate(0deg); } 5% { font-size:inherit; opacity:1; margin-left:0px; margin-top:0px; } 20% { font-size:inherit; opacity:1; margin-left:0px; margin-top:0px; transform: rotate(0deg); } 27% { font-size:0px; opacity:0.5; margin-left:20px; margin-top:100px; } 100% { font-size:0px; opacity:0; margin-left:-30px; margin-top:0px; transform: rotate(15deg); } } @keyframes roll2 { 0% { font-size:0px; opacity:0; margin-left:-30px; margin-top:0px; transform: rotate(-25deg); } 3% { opacity:1; transform: rotate(0deg); } 5% { font-size:inherit; opacity:1; margin-left:0px; margin-top:0px; } 30% { font-size:inherit; opacity:1; margin-left:0px; margin-top:0px; transform: rotate(0deg); } 37% { font-size:1500px; opacity:0; margin-left:-1000px; margin-top:-800px; } 100% { font-size:0px; opacity:0; margin-left:-30px; margin-top:0px; transform: rotate(15deg); } } @keyframes bg { 0% {background: #ff0075;} 3% {background: #0094ff;} 20% {background: #0094ff;} 23% {background: #b200ff;} 40% {background: #b200ff;} 43% {background: #8BC34A;} 60% {background: #8BC34A;} 63% {background: #F44336;} 80% {background: #F44336;} 83% {background: #F44336;} 100% {background: #F44336;} } Resources