Force transition to complete on hover CSS - html

Question

I have created a button. When the user hovers over it, a small red arrow fades in beneath it.
The transition time is 400ms. When I hover over the button for less than 400ms, I would like the red arrow to complete its full transition before fading out.
This gif shows the full transition, followed by the undesired behaviour.
#import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');
:root {
--init-bubble-padding: 0px;
--bubble-padding: 10px;
--triangle-height: 12px;
--transition-delay: 0ms;
--transition-time: 400ms;
}
* {
font-family: 'M PLUS 1p', Verdana, Geneva, Tahoma, sans-serif;
z-index: 100;
}
.popup-button-ctr {
display: inline-block;
position: relative;
outline: 0px solid red;
}
.button-ctr button {
background-color: rgba(30, 30, 30, 1);
border: none;
border-radius: 5px;
outline: 0px solid rgb(90, 90, 90);
font-weight: 900;
color: rgb(205, 205, 205);
padding: 8px 10px 8px 10px;
}
.button-ctr button:hover {
color: white;
cursor: pointer;
background-color: rgba(50, 50, 50, 1);
}
.triangle-up,
.triangle-right,
.triangle-down,
.triangle-left {
pointer-events: none;
display: relative;
position: absolute;
text-shadow: 1px 1px 10px rgba(21, 36, 63, 0.4);
z-index: 50;
color: rgba(255, 0, 0, 1);
background-color: transparent;
opacity: 0;
visibility: hidden;
transform: scale(0);
transition: var(--transition-time) ease-in-out;
transition-delay: var(--transition-delay);
transition-property: opacity, visibility, transform, top, right, bottom, left;
}
.popup-posr-up,
.popup-posr-right,
.popup-posr-down,
.popup-posr-left {
width: 0; height: 0;
z-index: 150;
position: absolute;
}
.popup-posr-down {
left: 50%;
}
.popup-button-ctr .triangle-down {
transform: rotate(0deg) translateX(-50%);
top: var(--init-bubble-padding);
}
.popup-button-ctr:hover .triangle-down {
transform: rotate(0deg) translateX(-50%);
opacity: 1;
visibility: visible;
transition: var(--transition-time) ease-in-out;
transition-delay: var(--transition-delay);
top: var(--bubble-padding);
<div class="popup-button-ctr">
<div class="button-ctr">
<button>
<div style="font-size: 30px">
Emoji Button
</div>
This button has emojis 😛 <br />
Let's ROCK 🤘 🤠 🎸
</button>
</div>
<div class="popup-posr-down">
<div class="triangle-down">
▲
</div>
</div>
</div>
Is there any way to force transitions to complete?
Many thanks - Oli

Answer 1

a CSS only solution by adding this code:
.popup-button-ctr:hover::before {
content:"";
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
animation:h calc(var(--transition-time) + var(--transition-delay)) forwards;
}
#keyframes h {
99.9% {bottom:0;}
100% {bottom:100%}
}
This will increase the hoverable area to the whole screen to make sure you will keep the hover effect until the end of transition.
#import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');
:root {
--init-bubble-padding: 0px;
--bubble-padding: 10px;
--triangle-height: 12px;
--transition-delay: 0ms;
--transition-time: 400ms;
}
* {
font-family: 'M PLUS 1p', Verdana, Geneva, Tahoma, sans-serif;
z-index: 100;
}
.popup-button-ctr {
display: inline-block;
position: relative;
outline: 0px solid red;
}
.button-ctr button {
background-color: rgba(30, 30, 30, 1);
border: none;
border-radius: 5px;
outline: 0px solid rgb(90, 90, 90);
font-weight: 900;
color: rgb(205, 205, 205);
padding: 8px 10px 8px 10px;
}
.button-ctr button:hover {
color: white;
cursor: pointer;
background-color: rgba(50, 50, 50, 1);
}
.triangle-up,
.triangle-right,
.triangle-down,
.triangle-left {
pointer-events: none;
display: relative;
position: absolute;
text-shadow: 1px 1px 10px rgba(21, 36, 63, 0.4);
z-index: 50;
color: rgba(255, 0, 0, 1);
background-color: transparent;
opacity: 0;
visibility: hidden;
transform: scale(0);
transition: var(--transition-time) ease-in-out;
transition-delay: var(--transition-delay);
transition-property: opacity, visibility, transform, top, right, bottom, left;
}
.popup-posr-up,
.popup-posr-right,
.popup-posr-down,
.popup-posr-left {
width: 0;
height: 0;
z-index: 150;
position: absolute;
}
.popup-posr-down {
left: 50%;
}
.popup-button-ctr .triangle-down {
transform: rotate(0deg) translateX(-50%);
top: var(--init-bubble-padding);
}
.popup-button-ctr:hover .triangle-down {
transform: rotate(0deg) translateX(-50%);
opacity: 1;
visibility: visible;
transition: var(--transition-time) ease-in-out;
transition-delay: var(--transition-delay);
top: var(--bubble-padding);
}
.popup-button-ctr:hover::before {
content:"";
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
animation:h calc(var(--transition-time) + var(--transition-delay)) forwards;
}
#keyframes h {
99.9% {bottom:0;}
100% {bottom:100%}
}
<div class="popup-button-ctr">
<div class="button-ctr">
<button>
<div style="font-size: 30px">
Emoji Button
</div>
This button has emojis 😛 <br />
Let's ROCK 🤘 🤠 🎸
</button>
</div>
<div class="popup-posr-down">
<div class="triangle-down">
▲
</div>
</div>
</div>

Answer 2

In my solution, I propose animation by means of jquery, for event hover.
$('.popup-button-ctr').hover(function(){
$('.triangle-down').css("transform", "rotate(0deg) translateX(-50%)");
$('.triangle-down').css('opacity', '1');
$('.triangle-down').css('visibility', 'visible');
$('.triangle-down').css('transition', '400ms');
$('.triangle-down').css('transition-delay', '0s');
$('.triangle-down').css('top', '10px');
}, function() {
setTimeout(function() {
$('.triangle-down').css("transform", "rotate() translateX()");
$('.triangle-down').css('opacity', '');
$('.triangle-down').css('visibility', '');
$('.triangle-down').css('transition', '');
$('.triangle-down').css('transition-delay', '');
$('.triangle-down').css('top', '');
}, 400);
});
#import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');
:root {
--init-bubble-padding: 0px;
--bubble-padding: 10px;
--triangle-height: 12px;
--transition-delay: 0ms;
--transition-time: 400ms;
}
* {
font-family: 'M PLUS 1p', Verdana, Geneva, Tahoma, sans-serif;
z-index: 100;
}
.popup-button-ctr {
display: inline-block;
position: relative;
outline: 0px solid red;
}
.button-ctr button {
background-color: rgba(30, 30, 30, 1);
border: none;
border-radius: 5px;
outline: 0px solid rgb(90, 90, 90);
font-weight: 900;
color: rgb(205, 205, 205);
padding: 8px 10px 8px 10px;
}
.button-ctr button:hover {
color: white;
cursor: pointer;
background-color: rgba(50, 50, 50, 1);
}
.triangle-up,
.triangle-right,
.triangle-down,
.triangle-left {
pointer-events: none;
display: relative;
position: absolute;
text-shadow: 1px 1px 10px rgba(21, 36, 63, 0.4);
z-index: 50;
color: rgba(255, 0, 0, 1);
background-color: transparent;
opacity: 0;
visibility: hidden;
transform: scale(0);
transition: var(--transition-time) ease-in-out;
transition-delay: var(--transition-delay);
transition-property: opacity, visibility, transform, top, right, bottom, left;
}
.popup-posr-up,
.popup-posr-right,
.popup-posr-down,
.popup-posr-left {
width: 0; height: 0;
z-index: 150;
position: absolute;
}
.popup-posr-down {
left: 50%;
}
.popup-button-ctr .triangle-down {
transform: rotate(0deg) translateX(-50%);
top: var(--init-bubble-padding);
}
/*.popup-button-ctr:hover .triangle-down {
transform: rotate(0deg) translateX(-50%);
opacity: 1;
visibility: visible;
transition: var(--transition-time) ease-in-out;
transition-delay: var(--transition-delay);
top: var(--bubble-padding);*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup-button-ctr">
<div class="button-ctr">
<button>
<div style="font-size: 30px">
Emoji Button
</div>
This button has emojis 😛 <br />
Let's ROCK 🤘 🤠 🎸
</button>
</div>
<div class="popup-posr-down">
<div class="triangle-down">
▲
</div>
</div>
</div>

Answer 3

If you are looking for a vanillajs solution without using any library like jQuery -
mouseover and mouseout eventlisteners are used to add a class .visible with the desired css to the triangle on hover and remove the same class after 400ms on removing the mouse cursor, allowing enough time for the transition.
document.querySelector('.popup-button-ctr').addEventListener("mouseover", function(){
document.querySelector('.triangle-down').classList.add("visible");
});
document.querySelector('.popup-button-ctr').addEventListener("mouseout", function(){
setTimeout(function() {
document.querySelector('.triangle-down').classList.remove("visible");
}, 400);
});
#import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');
:root {
--init-bubble-padding: 0px;
--bubble-padding: 10px;
--triangle-height: 12px;
--transition-delay: 0ms;
--transition-time: 400ms;
}
* {
font-family: 'M PLUS 1p', Verdana, Geneva, Tahoma, sans-serif;
z-index: 100;
}
.popup-button-ctr {
display: inline-block;
position: relative;
outline: 0px solid red;
}
.button-ctr button {
background-color: rgba(30, 30, 30, 1);
border: none;
border-radius: 5px;
outline: 0px solid rgb(90, 90, 90);
font-weight: 900;
color: rgb(205, 205, 205);
padding: 8px 10px 8px 10px;
}
.button-ctr button:hover {
color: white;
cursor: pointer;
background-color: rgba(50, 50, 50, 1);
}
.triangle-up,
.triangle-right,
.triangle-down,
.triangle-left {
pointer-events: none;
display: relative;
position: absolute;
text-shadow: 1px 1px 10px rgba(21, 36, 63, 0.4);
z-index: 50;
color: rgba(255, 0, 0, 1);
background-color: transparent;
opacity: 0;
visibility: hidden;
transform: scale(0);
transition: var(--transition-time) ease-in-out;
transition-delay: var(--transition-delay);
transition-property: opacity, visibility, transform, top, right, bottom, left;
}
.popup-posr-up,
.popup-posr-right,
.popup-posr-down,
.popup-posr-left {
width: 0; height: 0;
z-index: 150;
position: absolute;
}
.popup-posr-down {
left: 50%;
}
.popup-button-ctr .triangle-down {
transform: rotate(0deg) translateX(-50%);
top: var(--init-bubble-padding);
}
.visible{
transform : rotate(0deg) translateX(-50%);
opacity : 1;
visibility : visible;
transition : 400ms;
transition-delay : 0s;
top : 10px;
}
<div class="popup-button-ctr">
<div class="button-ctr">
<button>
<div style="font-size: 30px">
Emoji Button
</div>
This button has emojis 😛 <br />
Let's ROCK 🤘 🤠 🎸
</button>
</div>
<div class="popup-posr-down">
<div class="triangle-down">
▲
</div>
</div>
</div>