Menu
I would like to have a simple color transition on an HTML element.
The problem that I am trying to solve is that I need to have the first part of the transition happen faster and the second part slower.
So, I am after a quick blink (fade-in) and a slower revert (fade-out).
I have achieved this with the following solution, but it does not look correct to me. It does not look correct in the sense that I ended up with nested event handlers and the code is too convoluted. However, it demonstrates exactly what I am trying to achieve.
Is there a way to set this kind of a variableCSSTransition in a smarter way?
function updateCard (cardObj) {
// Handle card color.
let cardBlinkColor = 'rgb(11, 83, 69)';
// Store current background.
let cardIdleColor = cardObj.style.background;
// Asign fade-in properties.
cardObj.classList.add('fadeIn');
cardObj.style.background = cardBlinkColor;
cardObj.addEventListener('transitionend', function(event) {
//console.log('(IN) Done!, propertyName:', event.propertyName, 'elapsedTime:', event.elapsedTime);
cardObj.classList.remove('fadeIn');
cardObj.classList.add('fadeOut');
cardObj.style.background = cardIdleColor;
cardObj.addEventListener('transitionend', function(event) {
//console.log('(OUT) Done!, propertyName:', event.propertyName, 'elapsedTime:', event.elapsedTime);
cardObj.classList.remove('fadeOut');
}, true);
}, true);
}
const z = document.getElementsByClassName('card-container');
const card = z[0];
// Emulate client/server sequence.
setInterval(function() {
updateCard(card);
}, 3000);body {
background-color: rgb(0, 39, 59) !important;
}
.table {
/*border: 3px solid DeepSkyBlue;*/
/*table-layout: fixed;*/
width: 610px;
}
.table .main-row {
border: 4px solid rgb(0, 49, 74);
background-color: rgb(0, 39, 59);
}
.table .card-container {
border: 1px solid rgb(0, 70, 106);
background-color: rgb(2, 33, 46);
width: 10em;
margin: auto;
table-layout: fixed;
padding: 4px 4px;
}
.table .ticker {
color: rgb(159, 235, 252);
}
.table .icon {
color: rgb(252, 205, 159);
}
.table .card-container.fadeIn {
/* transition */
transition: background-color 0.1s ease-in;
}
.table .card-container.fadeOut {
/* transition */
transition: background-color 1s ease-out;
}<!DOCTYPE html>
<html>
<head>
<title>CSS Transition Test</title>
</head>
<body>
<div class="container" align="center">
<table class="table">
<tr>
<td class="main-row" align="center">
<table>
<td class="card-container" id="foo">
<table class="card-table">
<tr>
<td class="card-cell-left icon">+</td>
<td class="card-cell-right ticker">Test</td>
</tr>
</table>
</td>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
717
You can do this without using a separate class. Use CSS @keyframes:
body {
background-color: rgb(0, 39, 59) !important;
}
.table {
/*border: 3px solid DeepSkyBlue;*/
/*table-layout: fixed;*/
width: 610px;
}
.table .main-row {
border: 4px solid rgb(0, 49, 74);
background-color: rgb(0, 39, 59);
}
.table .card-container {
border: 1px solid rgb(0, 70, 106);
background-color: rgb(2, 33, 46);
width: 10em;
margin: auto;
table-layout: fixed;
padding: 4px 4px;
animation: fade 3s infinite;
}
.table .ticker {
color: rgb(159, 235, 252);
}
.table .icon {
color: rgb(252, 205, 159);
}
@keyframes fade {
0% { background-color: rgb(2, 33, 46); }
63.333% { background-color: rgb(2, 33, 46); }
66.667% { background-color: rgb(11, 83, 69); }
100% { background-color: rgb(2, 33, 46); }
}<div class="container" align="center">
<table class="table">
<tr>
<td class="main-row" align="center">
<table>
<td class="card-container" id="foo">
<table class="card-table">
<tr>
<td class="card-cell-left icon">+</td>
<td class="card-cell-right ticker">Test</td>
</tr>
</table>
</td>
</table>
</td>
</tr>
</table>
</div>The timing may differ a little. You can control the timing by manipulating the transition duration of the class and the stops (given in percentages) of the animation.
EDIT: I have modified the animation such that it exactly matches the one you made in JavaScript. The animation durations were calculated as follows:
Fade in duration = 0.1 seconds
Fade out duration = 1 seconds
Total transition duration = 3 seconds
Delay at the start = time interval - fade in - fade out = 3 - 0.1 - 1 = 1.9 seconds
Delay percentage = 1.9 ÷ 3 × 100 = 63.333 seconds
Fade in percentage = 0.1 ÷ 3 × 100 = 3.333 seconds
And the rest of the animation is a fade out.
56
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
