Botón de flecha animada con CSS3

El otro día un amigo me pedía que metiera una flechita en movimiento en su web. Os dejo el ejemplo de cómo lo hice, por si os resulta útil. Para crear la flecha utilizo font-awesome 😉

1. En el MARCADO:

<span class="hero-btn-holder" style="">
   <a target="_blank" href="/#main-content" class="hero-btn hero-slider-button">
         <i style="color: #ffffff;" class="fa fa-angle-down fa-4x ut-service-box-icon"></i>
   </a>
</span>

2. En el CSS:

/* flecha abajo en movimiento */
/* buscamos el selector que sea la flecha (en este caso la selección está sacada de un theme de ejemplo) */
#ut-hero-captions > ul:nth-child(1) > li:nth-child(n) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > span:nth-child(2) > a:nth-child(1){
	cursor: pointer;
	-webkit-animation: jumpInc 2s infinite;
       -moz-animation: jumpInc 2s infinite;
         -o-animation: jumpInc 2s infinite;
            animation: jumpInc 2s infinite;
}

@-webkit-keyframes jumpInc {
	0%   {
		margin-top: -122%;
		opacity: 0;
	}
	50%  {
		margin-top: 0%;
		opacity: 1;
	}
	100% {
		margin-top: 122%;
		opacity: 0;
	}
}

@-moz-keyframes jumpInc {
	0%   {
		margin-top: -122%;
		opacity: 0;
	}
	50%  {
		margin-top: 0%;
		opacity: 1;
	}
	100% {
		margin-top: 122%;
		opacity: 0;
	}
}
@-o-keyframes jumpInc {
	0%   {
		margin-top: -122%;
		opacity: 0;
	}
	50%  {
		margin-top: 0%;
		opacity: 1;
	}
	100% {
		margin-top: 122%;
		opacity: 0;
	}
}
@keyframes jumpInc {
	0%   {
		margin-top: -122%;
		opacity: 0;
	}
	50%  {
		margin-top: 0%;
		opacity: 1;
	}
	100% {
		margin-top: 122%;
		opacity: 0;
	}
}

/* /flecha abajo */