"CSS3 ANIMATIONS"
Bootstrap 3.3.0 Snippet by sonywang

<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"> <div class="animate three"> <span>c</span><span>s</span><span>s</span><span>3</span> <span>a</span><span>n</span><span>i</span><span>m</span><span>a</span><span>t</span><span>i</span><span>o</span><span>n</span><span>s</span> <a class="repeat" href="javascript:void(0);">Repeat Animation</a> </div> </div> </div>
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i'); * { margin: 0; padding: 0; } body { font-family: 'Lato', sans-serif; font-size: 14px; color: #999999; word-wrap: break-word; } p { margin: 0 0 10px; } ul { list-style: none; } .container { width: 100%; margin: auto; font-weight: 900; text-transform: uppercase; text-align: center; padding: 0 0 200px; } /*.take-input { margin: 50px 0 0; } .take-input input { width: 400px; height: 35px; padding: 0 10px; border-radius: 5px; border: 1px solid #ececec; margin: 0 15px 0 0; font-size: 15px; }*/ a, a:link, a:visited { text-decoration: none; padding: 9px 15px; border: 1px solid #ececec; border-radius: 5px; color: gray; } .animate { font-size: 50px; margin: 100px 0 0; border-bottom: 2px solid #ccc; } .animate span { display: inline-block; } a.repeat { display: inline-block; font-size: 12px; text-transform: none; text-decoration: none; color: orange; padding: 5px 12px; border: 1px solid #cecece; font-weight: normal; margin: 0 0 0 50px; border-radius: 5px; position: relative; bottom: 15px; } .animate span:nth-of-type(2) { animation-delay: .05s; } .animate span:nth-of-type(3) { animation-delay: .1s; } .animate span:nth-of-type(4) { animation-delay: .15s; } .animate span:nth-of-type(5) { animation-delay: .2s; } .animate span:nth-of-type(6) { animation-delay: .25s; } .animate span:nth-of-type(7) { animation-delay: .3s; } .animate span:nth-of-type(8) { animation-delay: .35s; } .animate span:nth-of-type(9) { animation-delay: .4s; } .animate span:nth-of-type(10) { animation-delay: .45s; } .animate span:nth-of-type(11) { animation-delay: .5s; } .animate span:nth-of-type(12) { animation-delay: .55s; } .animate span:nth-of-type(13) { animation-delay: .6s; } .animate span:nth-of-type(14) { animation-delay: .65s; } /* Animation Three */ .three span { color: #b10e81; opacity: 0; transform: translate(-300px, 0) scale(0); /*animation: sideSlide .5s forwards;*/ -webkit-animation: sideSlide 5s infinite; /* Safari 4.0 - 8.0 */ animation: sideSlide 5s infinite; } @keyframes sideSlide { 60% { transform: translate(20px, 0) scale(1); color: #b10e81; } 80% { transform: translate(20px, 0) scale(1); color: #b10e81; } 99% { transform: translate(0) scale(1.2); color: #00f0ff; } 100% { transform: translate(0) scale(1); opacity: 1; color: #b10e81; } }
$(function(){ $('.repeat').click(function(){ var classes = $(this).parent().attr('class'); $(this).parent().attr('class', 'animate'); var indicator = $(this); setTimeout(function(){ $(indicator).parent().addClass(classes); }, 20); }); });

Related: See More


Questions / Comments: