Force transition to complete on hover CSS

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

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>

Answer 3

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>