CSS 动画/过渡与不透明度交互答案

【问题标题】：CSS Animation/transition interacting with opacityCSS 动画/过渡与不透明度交互
【发布时间】：2016-03-12 17:18:53
【问题描述】：

目前，我有一些文本淡入淡出，当用户将鼠标悬停在文本上时，它应该“过渡”到完全不透明度（不透明度：1）。

目前，我有这个：`https://jsfiddle.net/17ppzb2p/4/

HTML

<!DOCTYPE html>
<body>
    <div id="start">
        START
    </div>
</body>

CSS

@-webkit-keyframes fadeInOut{
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0.2;
    }
}
@-webkit-keyframes glow {
    0% {
        opacity: 0.4;  /*from current opacity*/
    }
    100% {
        opacity: 1;
    }
}
#start {
    position: absolute;
    top: 50px;
    left: 80px;
    font-size: 36px;
    letter-spacing: 30px;
    color: black;
    font-weight: 400;
    -webkit-animation: fadeInOut 6s infinite;
    /* -webkit-transition: opacity 1s; */
    /* Failed attempt to use transition to change opcaity. */
}
#start:hover {
    -webkit-animation-play-state: paused;
    -webkit-animation: glow 2s;
    /* opacity: 1; */
}

我希望不透明度从由淡入输出动画控制的当前不透明度 --> 变为完全不透明度。

我知道为了使用不透明度的当前值，我应该使用“过渡”，但是当我尝试这个时，它不会覆盖淡入出动画中的当前不透明度。

我希望这是有道理的:)

干杯！

【问题讨论】：

标签： css css-transitions css-animations opacity

【解决方案1】：

如果您希望悬停文本具有完全不透明度效果，您可以根据需要设置初始不透明度。例如：

#start { opacity: 0.3 //here position: absolute; top: 50px; left: 80px; font-size: 36px; letter-spacing: 30px; color: black; font-weight: 400; -webkit-transition: opacity 1s;} #start:hover { opacity: 1; }

悬停时将其设置为 1。

【讨论】：

正是 plushyObject 所说的......它不起作用，对不起。

【解决方案2】：

您需要将 #start 的不透明度设置为 0（悬停前）。每当您使用过渡时，您需要确保您有一个“初始”设置。

#start {
  opacity: 0 //here
  position: absolute;
  top: 50px;
  left: 80px;
  font-size: 36px;
  letter-spacing: 30px;
  color: black;
  font-weight: 400;
  -webkit-transition: opacity 1s;
}

#start:hover {
  opacity: 1;
}

这应该可行。如果您需要帮助，请告诉我。

【讨论】：

请记住，在处理文本的不透明度时，最好使用 color: rgba(0,0,0,0) 和 color: rgba(0,0,0,1.0)然后在颜色上进行过渡。
遗憾的是，这不起作用:(这是我运行它的真实代码：jsfiddle.net/ccr1ca8s 相反，您的解决方案只是在悬停时冻结不透明度。您介意再看一下吗？ :)