html - 从 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;
}

我的 HTML 上面的 CSS 看起来像这样

<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。当我没有运行动画时它工作得很好，但目前它就是这样做的。

Click Here to see the Gyazo Gif

我希望我说清楚了，我尽力了。 gif 提前结束，但图像在整个过程中保持不变，即使在 3 秒后也是如此。提前谢谢大家，这真的意义重大!

Answer 1

我所做的是向您的图标的链接包装器添加一个类 - “icon-link”。在那个 wrapper 上，我将不透明度设置为 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>