"Text animation (see @ codepen.io)"
Bootstrap 4.0.0 Snippet by xrozix

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ----------> <p>looking for a...</p><br /> <b> <span1> front-end web developer<br /> content strategist<br /> brand engineer<br /> experience designer<br /> visual artist<br /> creative consultant<br /> </span1> </b>  <br />
body { padding: 2em 5em; font: normal 40px/50px 'Open Sans', sans-serif; color: #999; } p { height: 50px; float: left; margin-right: 0.3em; } b { float: right; overflow: hidden; position: relative; height: 60px; } span1 { display: inline-block; color: #bbaaff; position: relative; white-space: nowrap; font-size: 50px; line-height: 60px; top: 0; left: 0; -webkit-animation: move 8s; -webkit-animation-iteration-count: 3; -webkit-animation-delay: 1.5s; } @keyframes move { 0% { transform: move top 0px; } 15% { transform: move top -60px; } 30% { transform: move top -120px; } 45% { transform: move top -180px; } 60% { transform: move top -240px; } 75% { transform: move top -300px; } 90% { transform: move top -360px; } } @keyframes color { 0% { color: red; } 15% { color: purple; } 30% { color: blue; } 45% { color: green; } 60% { top: pink; } 75% { transform: color pink; } 90% { transform: color #bbaaff; } }

Related: See More


Questions / Comments: