<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="title"> <div class="title-word">Leading</div> <div class="title-word">Outsource</div> <div class="title-word">Studio</div> </div>

html, body { width: 100%; height: 100%; } body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #262626; } .title { position: relative; -webkit-perspective: 400; perspective: 400; padding-left: 17px; font-family: Arial; font-weight: bold; font-size: 52px; text-transform: uppercase; color: #fff; } .title:before { content: ''; display: block; position: absolute; height: 100%; width: 6px; background: #ff1212; top: 0; left: 0; opacity: 0; -webkit-transform: translateX(-150px); transform: translateX(-150px); -webkit-animation: title-border-slide-in 0.35s ease-out forwards; animation: title-border-slide-in 0.35s ease-out forwards; } .title .title-word { opacity: 0; -webkit-transform-origin: bottom center; transform-origin: bottom center; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); } .title .title-word:nth-child(1) { -webkit-animation: roll-in 0.15s 0s ease-out forwards; animation: roll-in 0.15s 0s ease-out forwards; } .title .title-word:nth-child(2) { -webkit-animation: roll-in 0.15s 0.175s ease-out forwards; animation: roll-in 0.15s 0.175s ease-out forwards; } .title .title-word:nth-child(3) { -webkit-animation: roll-in 0.15s 0.35s ease-out forwards; animation: roll-in 0.15s 0.35s ease-out forwards; } .title .title-word:nth-child(4) { -webkit-animation: roll-in 0.15s 0.525s ease-out forwards; animation: roll-in 0.15s 0.525s ease-out forwards; } @-webkit-keyframes title-border-slide-in { 0% { -webkit-transform: translateX(-150px); transform: translateX(-150px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes title-border-slide-in { 0% { -webkit-transform: translateX(-150px); transform: translateX(-150px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @-webkit-keyframes roll-in { 0% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); opacity: 1; } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } } @keyframes roll-in { 0% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); opacity: 1; } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } }