a{transition:color .5s linear,background .5s ease-in-out;}
a:hover{transition:color .5s linear,background .5s ease-in-out;}

.b{
background:linear-gradient(#33ffff,hotpink);
text-align:center;
}

.a{
width:60%;
margin:0 auto;
position:relative;
height:65%;
margin-top:5%;
border-radius:10px;
box-shadow:0 0 0 10px #fff;
}

.c{
list-style:none;
}

.c li span{
width:100%;
height:100%;
position:absolute;
border-radius:10px;
top:0px;
left:0px;
opacity:0;
background-size:cover;
background-position:50% 50%;
animation:i 18s linear infinite 0s;
}

.c li:nth-child(1) span{background-image:url(../img/1.jpg);}

.c li:nth-child(2) span{background-image:url(../img/2.jpg);
animation-delay:3s;}
.c li:nth-child(3) span{background-image:url(../img/3.jpg);
animation-delay:6s;}
.c li:nth-child(4) span{background-image:url(../img/4.jpg);
animation-delay:9s;}
.c li:nth-child(5) span{background-image:url(../img/5.jpg);
animation-delay:12s;}
.c li:nth-child(6) span{background-image:url(../img/6.jpg);
animation-delay:15s;}

@keyframes i{
 10%{
  opacity:1;
  animation-timing-function:ease-out;
  transfrom:scale(1.1);
}
 20%{
  opacity:0;
  transfrom:scale(1.1)translatey(/20%);
}
}

.h{
box-shadow:3px 4px 0px 0px gray;
border-radius:10px;
border:1px;
background:cyan;
background:linear-gradient(to bottom,#33ffff 50%,#fff 100%);
color:#000;
font-size:15px;
padding:20px 60px 20px 60px;
text-decoration:none;
width:15%;
}

.h:hover{
box-shadow:3px 4px 0px 0px gray;
border-radius:10px;
border:1px;
background:linear-gradient(to bottom,hotpink 50%,#fff 100%);
color:#fff;
font-size:15px;
padding:20px 60px 20px 60px;
text-decoration:none;
width:15%;
}