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動畫/過渡與不透明相互作用

回答

相關問題