html - 从不透明度为0的图像淡入淡出但停在0.35，然后将不透明度为1悬停？

我过去20年来一直在这个网站上工作，但我遇到了障碍。我似乎无法淡入我的图像（从0透明度开始），然后停在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的不透明度开始，然后淡出为0.35，然后当我将悬停变成1时。当我没有运行动画时，它工作得很好，但是目前这就是它的作用。

Click Here to see the Gyazo Gif

我希望我说得很清楚，我已尽力了。 gif会提前切掉，但是即使经过3秒，图像在整个时间内仍保持不变。提前谢谢大家，这真的意味着很多！

最佳答案

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

关于html - 从不透明度为0的图像淡入淡出但停在0.35，然后将不透明度为1悬停？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36191481/