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

我所做的是在你的图标的链接包装中添加一个类 - ＆＃34; icon-link＆＃34;。在该包装器上，我将不透明度设置为0.35，并在悬停时将其设置为1。

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

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

＆＃13;

@-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;
}

＆＃13;

<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>

＆＃13;

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

从0不透明度淡入图像但在.35处停止然后悬停为1的不透明度？

2 个答案: