How to link to each banner in @keyframes

Question

I have the following code working perfectly, however, I need that on each of the three banners of @keyframes has an individual link. There is this possibility?

HTML

<div class="banner"></div>

CSS

.banner {
width: 960px;
height: 350px;
margin: 0 auto;
animation: slide 10s infinite;
animation-direction: alterante;
}

@keyframes slide {

    0%, 30% {
        background-image: url(../imagens/001.jpg);
        }

    35%, 65% {
        background-image: url(../imagens/002.jpg);
        }

    70%, 100% {
        background-image: url(../imagens/003.jpg);
        }

}

Answer 1

I don’t think so, put in case your problem and HTML.

You will have to create 3 banner class Ivs, and in CSS, setalas as None display, in each size.

For example:

<div class="banner key1"></div>
<div class="banner key2"></div>
<div class="banner key3"></div>

CSS:

@media screen and (max-width: 30%) and (min-width: 0%) {
   .key2, .key3 {
      display:none;
   }
}
@media screen and (max-width: 65%) and (min-width: 35%) {
   .key1, .key3 {
      display:none;
   }
}
@media screen and (max-width: 100%) and (min-width: 70%) {
   .key1, .key2 {
      display:none;
   }
}

Answer 2

You can do something like this:

<a href="seu_link1"><div style="background-image: url('img1');"></a>
<a href="seu_link2"><div style="background-image: url('img2');"></a>
<a href="seu_link3"><div style="background-image: url('img3');"></a>