Fatal编程技术网
  • css/
  • CSS动画/过渡与不透明度交互

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

css

CSS动画/过渡与不透明度交互,css,css-transitions,css-animations,opacity,Css,Css Transitions,Css Animations,Opacity,目前，我有一些文本淡入淡出，当用户将鼠标悬停在文本上时，它应该“转换”为完全不透明度（不透明度：1） 目前，我有：` HTML <!DOCTYPE html> <body> <div id="start"> START </div> </body> 我希望不透明度从由fadeInOut动画-->控制的当前不透明度变为完全不透明度 我知道，为了使用当前的不透明度值，我应该使用“transition”，但当

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

目前，我有：`

HTML

<!DOCTYPE html>
<body>
    <div id="start">
        START
    </div>
</body>
我希望不透明度从由fadeInOut动画-->控制的当前不透明度变为完全不透明度

我知道，为了使用当前的不透明度值，我应该使用“transition”，但当我尝试此操作时，它不会覆盖fadeInOut动画中的当前不透明度

我希望这是有道理的：）

干杯

需要将#开始（悬停前）的不透明度设置为0。无论何时使用transition，都需要确保具有“初始”设置

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

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

#开始{不透明度：0.3//此处位置：绝对；顶部：50px；左侧：80px；
字体大小：36px；字母间距：30px；颜色：黑色；字重：400；
-webkit转换：不透明度1s；}#开始：悬停{不透明度：1；}

悬停时将其设置为1。

请记住，在处理文本的不透明度时，最好使用color:rgba（0,0,0,0）和color:rgba（0,0,0,1.0），然后在颜色上进行转换。遗憾的是，这不起作用：（这是我运行它的真实代码：相反，你的解决方案在悬停时会冻结不透明度。请你再看一眼好吗？：）正是plushyObject所说的……它不起作用，对不起。 
@-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; */
}

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