CSS KeyFrames со ссылками

Question

У меня есть несколько изображений, которые прокручиваются красиво через ключевых кадры

@-webkit-keyframes headImage /* Safari and Chrome */ 
{ 
0% {background:url(../images/homeBackground1.jpg) no-repeat left top #D8E3E9;} 
10% {background:url(../images/homeBackground2.jpg) no-repeat left top #D8E3E9;} 
30% {background:url(../images/homeBackground3.jpg) no-repeat left top #D8E3E9;} 
50% {background:url(../images/homeBackground4.jpg) no-repeat left top #D8E3E9;} 
70% {background:url(../images/homeBackground5.jpg) no-repeat left top #D8E3E9;} 
90% {background:url(../images/homeBackground1.jpg) no-repeat left top #D8E3E9;} 
} 

Однако я хочу сделать одно из этих изображений активной ссылки, так, например, я хочу homeBackground1.jpg сделать ссылку на Google. co.uk, когда он виден, но другие не свяжутся нигде, когда они отображаются.

есть ли способ сделать это?

Благодаря

Чтобы расширить немного на этом,

код, чтобы вставить его в HTML просто

<section id="journey"> </section> 

и CSS

#journey { 
    height:400px; 
/* border-bottom: 5px solid #E64097; 
    border-top: 5px solid #E64097;*/ 
    background: url(../images/homeBackground1.jpg) no-repeat left top #D8E3E9; 
    -moz-animation:headImage 60s infinite; /* Firefox */ 
    -webkit-animation:headImage 60s infinite; /* Safari and Chrome */ 
} 

Answer 1

Вам нужно создать спрайт. Таким образом, все ваши изображения объединены на одном большом изображении, но пользователь может видеть только часть изображения.

Затем вы просто меняете background-position с использованием ключевых кадров. Вот хороший JSFIDDLE DEMO

В CSS вы можете использовать from, to или % в масштабе времени, если вы знаете, количество ключевых кадров, которые вы должны использовать.