Animation not working in CSS - css

Question

I am using Codepen and would like one of my elements to fade in and out. I can't find any errors in my code but it is still not working. Thanks for any help!
The item is a little logo box that you press to open up a new window with text. It currently changes on mouseover but I would also like to make it fade in and out so that people know they need to click it.
Thanks Danko, I got it working now! Can't believe the issue was that simple haha :)
.mainlink a:link, a:visited {
display: block;
background: url(http://i.imgur.com/E3EQRWV.jpg?2);
background-size:cover;
width: 50px;
height: 50px;
border-radius: 50%;
position: relative;
margin-left: auto;
margin-right: auto;
border: 2px solid black;
animation: fadin 3s infinite alternate;
-webkit-animation: fadin 3s infinite alternate;
-moz-animation: fadin 3s infinite alternate;
-o-animation: fadin 3s infinite alternate;}
#keyframes fadin {
0% {opacity: 100%;}
50% {opacity: 50%;}
100% {opacity: 0%;}}
#-webkit-keyframes fadin{
0% {opacity: 100%;}
50% {opacity: 50%;}
100% {opacity: 0%;}}
#-moz-keyframes fadin{
0% {opacity: 100%;}
50% {opacity: 50%;}
100% {opacity: 0%;}}
#-o-keyframes fadin{
0% {opacity: 100%;}
50% {opacity: 50%;}
100% {opacity: 0%;}}

Answer 1

The problem here is opacity doesn't accept % as unit value. Change it to a value between
1 and 0 Where 1 = 100% and 0 = 0%
Try this:
#keyframes fadin {
0% {opacity: 1;}
100% {opacity: 0;}
}
.mainlink a {
display: block;
background: url(http://i.imgur.com/E3EQRWV.jpg?2);
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
position: relative;
margin-left: auto;
margin-right: auto;
border: 2px solid black;
animation: fadin 3s infinite alternate;
-webkit-animation: fadin 3s infinite alternate;
-moz-animation: fadin 3s infinite alternate;
-o-animation: fadin 3s infinite alternate;
}
#keyframes fadin {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fadin {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fadin {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fadin {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="mainlink">
</div>