Jugando con CSS y las animaciones

Jugando un poco con CSS. Sólo se trata de basarse en alguno de los ejemplos de Codrops e irlos modificando para tratar de entender como funcionan y sacar conclusiones ... o, simplemente, pasar un buen rato ...

... el HTML es poca cosa ...

<div class="ejemplo">
  <a href="#"><span>?</span></a>
</div>

el resto, claro, depende de los estilos:

<style>
  .ejemplo {
    margin: 30px auto;
    text-align: center;
  }
  .ejemplo a span {
    /* el texto y el recuadro */
    border: 10px solid #FFF;
    color: #FFF;
    font-size: 120px;
    line-height: 200px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.4);
    /* el tamaño */
    display: inline-block;
    position: relative;
    height: 200px;
    width: 300px;
    /* la imagen de fondo (es este caso mide 500x300) */
    background: transparent url(https://lh6.googleusercontent.com/-zD2DFAjpEkI/Txxw9HXNybI/AAAAAAAAAcA/2WnNyP5_P5I/s500/09_0338.jpg) no-repeat 50% 0%;
    /* se la redimensiona y deforma un poco */
    background-size: 500px 400px;
    /* la transición del texto */
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
  }
  .ejemplo a span:hover {
    /* efecto hover sobre el texto */
    color: rgba(255,255,255,0.4);
    text-shadow: 0 0 5px rgba(0,0,0,0.1);
    z-index: 10;
    /* lanzamos la animación */
    -moz-animation: moveImg 10s linear infinite forwards;
    -webkit-animation: moveImg 10s linear infinite forwards;
    -o-animation: moveImg 10s linear infinite forwards;
    -ms-animation: moveImg 10s linear infinite forwards;
    animation: moveImg 10s linear infinite forwards;
  }

  /* esta es la animación en si misma que, simplemente, desplaza el fondo hacia arriba y hacia abajo */
  @-moz-keyframes moveImg {
    0%{background-position: 50% 0%;}
    50%{background-position: 50% 100%;}
    100%{background-position: 50% 0%;}
  }
  @-webkit-keyframes moveImg {
    0%{background-position: 50% 0%;}
    50%{background-position: 50% 100%;}
    100%{background-position: 50% 0%;}
  }
  @keyframes moveImg {
    0%{background-position: 50% 0%;}
    50%{background-position: 50% 100%;}
    100%{background-position: 50% 0%;}
  }
</style>

?

otra variante:

?