从0的不透明度开始在图像中衰减，但在.35处停止，然后悬停到1的不透明度

Question

我在这个网站上工作了20分钟，可能遇到了障碍。我似乎无法淡入我的图像（从0不透明度），然后停止在.35不透明度，然后当我悬停时，它变成1不透明度。希望这一切都有意义。

@-webkit- animation fadein {
    from {
        opacity: 0;
    }
    to {
        opacity 1;   
    }
}
@-webkit- animation fadeinicons {
    from {
        opacity: 0;
    }
    to {
        opacity .35;   
    }
}
@keyframes fadeinicons {
    from {
        opacity: 0;
    }
    to {
        opacity .35;   
    }
}
.icons {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    padding: 20px 20px 0px 20px;
    border-radius: 50%;
    text-decoration: none;
}
.icons:hover {
    opacity: 1;
    text-align: center;
}
.facebook {
    opacity: 0;
    animation-name: fadeinicons;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 3.5s;
}
.twitter {
    opacity: 0;
    animation-name: fadeinicons;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 7.5s;
}
.github {
    opacity: 0;
    animation-name: fadeinicons;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 11.5s;
}

这是我的CSS在我的html上面看起来像这个

<center> 
        <a href="https://www.facebook.com/profile.php?id=100011139572310" target="_blank"> <img src="0.png" class="icons" height="95" width="95" class="facebook" /> </a>
        <a  href="https://twitter.com/_moemansour" target="_blank">
        <img src="2.png" class="icons" height="95" width="95" class="twitter" /></a>
        <a href="https://github.com/moemansour" target="_blank">
        <img src="4.png" class="icons" height="95" width="95" class="github" /> 
      </center>

它似乎不是从0的不透明度开始，然后逐渐变为.35，然后当我悬停时变成1。当我没有动画运行时，它运行得很好，但目前它就是这样做的。

点击此处查看Gyazo Gif

我希望我说得很清楚，我已经尽力了。gif很早就被剪掉了，但即使过了3秒，图像也一直保持不变。提前感谢大家，这真的很重要！

Answer 1

我所做的是将一个类添加到图标的链接包装器中——"图标链接"。在这个包装上，我将不透明度设置为0.35，悬停时更改为1。

在图像上，我添加了一个惊人的效果（延迟动画），就像你想要的那样。

这是最终结果。我认为这符合你想要实现的目标：）

@-webkit-keyframes fadeinicons {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.icons {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  padding: 20px 20px 0px 20px;
  border-radius: 50%;
  text-decoration: none;
}
.facebook,
.twitter,
.github {
  opacity: 0;
  animation-name: fadeinicons;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
}
.twitter {
  -webkit-animation-delay: 2s;
}
.github {
  -webkit-animation-delay: 3s;
}
.icon-link {
  opacity: 0.35;
  text-align: center;
}
.icon-link:hover {
  opacity: 1;
}

<center>
  <a href="#" class="icon-link" target="_blank">
    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-512.png" class="icons facebook" height="95" width="95" />
  </a>
  <a href="#" class="icon-link" target="_blank">
    <img src="http://yolna.com/wp-content/uploads/2015/12/twitter-circle-logo.png" class="icons twitter" height="95" width="95" />
  </a>
  <a href="#" class="icon-link" target="_blank">
    <img src="https://image.freepik.com/free-icon/github-circled_318-10752.jpg" class="icons github" height="95" width="95" />
  </a>
</center>

Answer 2

Some of your html snippets are totally wrong. 
     For ex added class attribute twice. 
     Always browsers identifies first defined class attribute and ignores duplication. 
     You also didn't close your anchor tag for the img4.png . Refer https://jsfiddle.net/tt3oycty/2/
<center> 
        <a href="https://www.facebook.com/profile.php?id=100011139572310" target="_blank"> <img src="http://eskipaper.com/images/images-4.jpg" class="icons facebook" height="95" width="95" class="" /> </a>
        <a  href="https://twitter.com/_moemansour" target="_blank">
        <img src="http://eskipaper.com/images/images-4.jpg" class="icons twitter" height="95" width="95" class="" /></a>
        <a href="https://github.com/moemansour" target="_blank">
        <img src="http://eskipaper.com/images/images-4.jpg" class="icons github" height="95" width="95" class="" />
        </a>
 </center>
@-webkit- animation fadein {
    from {
        opacity: 0;
    }
    to {
        opacity 1;   
    }
}
@-webkit- animation fadeinicons {
    from {
        opacity: 0;
    }
    to {
        opacity .35;   
    }
}
@keyframes fadeinicons {
    from {
        opacity: 0;
    }
    to {
        opacity .35;   
    }
}
.icons {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    padding: 20px 20px 0px 20px;
    border-radius: 50%;
    text-decoration: none;
}
.icons:hover {
    opacity: 1;
    text-align: center;
}
.facebook {
    opacity: 0.35;
    animation-name: fadeinicons;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 3.5s;
}
.twitter {
    opacity: 0.35;
    animation-name: fadeinicons;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 7.5s;
}
.github {
    opacity: 0.35;
    animation-name: fadeinicons;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 11.5s;
}