<div id="result" style="--opacity: .5"></div>
<input type="range" min="0" max="1" step="0.01" value=".5" oninput="result.style.setProperty('--opacity', event.target.value)" />
@keyframes add-opacity {
to { color: transparent }
}
body {
margin: 1em;
width: 300px;
}
// theme.css
:root {
--color-primary: rgb(9, 123, 166);
}
// some-page.css
div {
height: 30px;
background: currentColor;
color: var(--color-primary);
animation: add-opacity 1s calc((1 - var(--opacity)) * -1s) linear paused forwards;
}
[type="range"] {
width: 100%;
margin-top: .5em;
}
View Compiled
window.result = document.getElementById('result');
result.onclick = function() {
console.log(getComputedStyle(this).backgroundColor);
};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.