CSS动画/过渡与不透明相互作用

目前，我有一些文本淡入淡出，当用户悬停在文本上时，它应该“过渡”到其完全不透明（不透明度：1）。CSS动画/过渡与不透明相互作用

目前，我有这样的：`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; */ 
}

我想的不透明度，从由fadeInOut控制的电流不透明度去动画 - >到完全不透明。

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

我希望这是有道理的:)

干杯！

来源

2015-12-07 Edwarric

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

这应该起作用。让我知道你是否需要帮助。

来源

2015-12-07 23:45:06 plushyObject

请记住，用不透明的文字打交道时，它可能是更好地使用颜色：RGBA（0,0,0， 0）和颜色：rgba（0,0,0,1.0），然后在颜色上进行转换。 – plushyObject

不幸的是，这不起作用:(这是我的真实代码，我运行它：https://jsfiddle.net/ccr1ca8s/相反，你的解决方案只是冻结不透明度时，你会介意再看一下吗？ :) – Edwarric

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

#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

来源

2015-12-08 08:45:28

究竟是什么plushyObject说...它不工作，对不起。 – Edwarric

CSS动画/过渡与不透明相互作用

回答

相关问题