I have 3 icons on my site that I would like to fade in with CSS opacity and I would like them to be hidden before the animation starts. The visibility of the icons needs to be hidden starting out, but where? Here is the code I have so far:

```
/* Animation keyframes for icons below carousel */
@-moz-keyframes icon-move {
 0%  {opacity: 0;}
 25% {opacity: 0.2;}
 50% {opacity: 0.4;}
 75% {opacity: 0.6;}
 100% {opacity: 1;}
}
@-webkit-keyframes icon-move {
 0%  {opacity: 0;}
 25% {opacity: 0.2;}
 50% {opacity: 0.4;}
 75% {opacity: 0.6;}
 100% {opacity: 1;}
}
@keyframes icon-move {
 0% {opacity: 0;}
 25% {opacity: 0.2;}
 50% {opacity: 0.4;}
 75% {opacity: 0.6;}
 100% {opacity: 1;}
}
.icon {
 -webkit-animation-name: icon-move;
 -ms-animation-duration: 10s;
 animation-duration: 10s;
 -webkit-animation-delay: 3s;
 -moz-animation-delay: 3s;
 -ms-animation-delay: 3s;
  animation-delay: 3s;
 -webkit-animation-iteration-count: 2;
 -moz-animation-iteration-count: 2;
 -ms-animation-iteration-count: 2;
 animation-iteration-count: 2;
}

```