<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);
});
});
