<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> </div>--> <div class="logo"> <p class="letter">A</p> <div class="border"></div> <div class="slides"> <div class="slide slide1"></div> <div class="slide slide2"></div> <div class="slide slide3"></div> <div class="slide slide4"></div> <div class="slide slide5"></div> </div> </div>

*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; } html { width: 100%; height: 100%; } body { position: relative; width: 100%; height: 100%; background: #aaa; font-family: Montserrat, sans-serif; font-size: 16px; padding-top: 50px; } .logo { position: relative; margin: 0 auto; overflow: hidden; width: 400px; height: 400px; color: #333; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .border { position: relative; z-index: 1000; width: 100%; height: 100%; border: 15px solid #fff; opacity: 0; -webkit-animation: b1 .5s 1.9s forwards; animation: b1 .5s 1.9s forwards; } @-webkit-keyframes b1 { to { opacity: 0.55; } } @keyframes b1 { to { opacity: 0.55; } } p.letter { position: absolute; top: 0; left: 0; z-index: 1001; font-size: 22em; font-weight: 400; text-align: center; line-height: 0; padding-top: 200px; color: #fff; cursor: pointer; opacity: 0; width: 100%; height: 100%; -webkit-animation: l1 .5s 1.9s forwards; animation: l1 .5s 1.9s forwards; } @-webkit-keyframes l1 { to { opacity: 1; } } @keyframes l1 { to { opacity: 1; } } .slides { position: absolute; top: -83px; left: -82px; width: 566px; height: 566px; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari */ transform: rotate(45deg); } .slide { position: relative; float: left; width: 20%; height: 0; } .slide1 { background-color: #003134; -webkit-animation: s1 .7s .8s forwards; animation: s1 .7s .8s forwards; } @-webkit-keyframes s1 { to { height: 100%; } } @keyframes s1 { to { height: 100%; } } .slide2 { background-color: #005872; -webkit-animation: s2 .7s 1s forwards; animation: s2 .7s 1s forwards; } @-webkit-keyframes s2 { to { height: 100%; } } @keyframes s2 { to { height: 100%; } } .slide3 { background-color: #4d9aa9; -webkit-animation: s3 .7s 1.2s forwards; animation: s3 .7s 1.2s forwards; } @-webkit-keyframes s3 { to { height: 100%; } } @keyframes s3 { to { height: 100%; } } .slide4 { background-color: #0e7286; -webkit-animation: s4 .7s 1.4s forwards; animation: s4 .7s 1.4s forwards; } @-webkit-keyframes s4 { to { height: 100%; } } @keyframes s4 { to { height: 100%; } } .slide5 { background-color: #002029; -webkit-animation: s5 .7s 1.6s forwards; animation: s5 .7s 1.6s forwards; } @-webkit-keyframes s5 { to { height: 100%; } } @keyframes s5 { to { height: 100%; } }