<div class="glyphicon glyphicon-chevron-right bounce">
</div>
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateX(0);
transform: translateX(0);
}
40% {
-moz-transform: translateX(-30px);
transform: translateX(-30px);
}
60% {
-moz-transform: translateX(-15px);
transform: translateX(-15px);
}
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
40% {
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
60% {
-webkit-transform: translateX(-15px);
transform: translateX(-15px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
40% {
-moz-transform: translateX(-30px);
-ms-transform: translateX(-30px);
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
60% {
-moz-transform: translateX(-15px);
-ms-transform: translateX(-15px);
-webkit-transform: translateX(-15px);
transform: translateX(-15px);
}
}
body {
background: black;
}
.glyphicon-chevron-right {
color: white;
background: black;
margin-left: 30px;
}
.bounce {
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
View Compiled
This Pen doesn't use any external JavaScript resources.