Question

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

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

我希望不透明度来自fadeInOut动画控制的当前不透明度 - ＆gt;完全不透明。

我知道为了使用我应该使用的不透明度的当前值＆＃39; transition＆＃39;，但是当我尝试这个时，它不会覆盖fadeInOut动画中的当前不透明度。

我希望这是有道理的：）

干杯！

Answer 1

您需要为#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;
}

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

Answer 2

如果您想要对悬停文本产生完全不透明效果，可以根据需要设置初始不透明度。例如：

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

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

2 个答案: