Force Transition to Complete on Hover CSS

Force transition to complete on hover CSS

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 br>    </button>
  </div>

  <div class="popup-posr-down">
    <div class="triangle-down">
      ▲
    </div>
  </div>

</div>

Force end CSS transition on hover

As stated before, this is not possible with Pure CSS

However here's a hack that requires nesting and doesn't work with multiple siblings and if the mouse moves out of the document.

body {
  overflow: hidden;
}

[ctr] {
  display: inline-block;
}

[box] {
  width: 80px;
  height: 80px;
  background: red;
  position: relative;
  transition: 1s;
  left: 0;
}

[ctr]:hover {
  left: 20px;
  width: 9999px;
  height: 9999px;
  animation: resetctr 1s 1s linear forwards;
}

[ctr]:hover>[box] {
  left: 20px;
  animation: resetbox 1s 1s forwards;
}

@keyframes resetbox {
  from {
    left: 20px;
  }
  to {
    left: 0;
  }
}

@keyframes resetctr {
  to {
    width: auto;
    height: auto;
  }
}

<div ctr>
  <div box></div>
</div>

React force transition to end on hover

You can make a component for transition.

https://jsfiddle.net/fdq6nabk/21/

function AniLetter(props) {
  const handleMouseEnter = (e) => {
    e.target.classList.add("hover");
  }
  const handleTransitionEnd = (e) => {
    e.target.classList.remove("hover");
  }

  return (
    <li
      onMouseEnter={handleMouseEnter}
      onTransitionEnd={handleTransitionEnd}>
      {props.children}
    </li>
  )
}

function App() {
  return (
    <ul> 
      <AniLetter>H</AniLetter>
      <AniLetter>e</AniLetter>
      <AniLetter>l</AniLetter>
      <AniLetter>l</AniLetter>
      <AniLetter>o</AniLetter>
    </ul>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

CSS:

ul li {
    list-style: none;
    float: left;
    font-size:60px;
    color: black;
    margin: 0 6px;
}

li.hover {
    transition: 2.9s;
    transform: rotateY(360deg);
}

css3 animation on :hover; force entire animation

I'm afraid that the only way to solve this is with a bit of javascript, you must add the animation as a class and then remove it when the animation finishes.

$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
  $(this).removeClass("animated")  
})

$(".box").hover(function(){
  $(this).addClass("animated");        
})

http://jsfiddle.net/u7vXT/

Forcing a CSS animation to complete

I'm not sure how you can do this without JavaScript. You can toggle classes instead of using hover selector and use transitionend to detect when the animation has completed to toggle the hover classes.

https://jsfiddle.net/w5b1hm0w/2/

Why doesn't this CSS transition complete it's move hover

What you are seeing is expected behavior because when you use rotateX on an element because as the element is being rotated, its boundaries start shrinking (the boundaries don't exactly shrink but its projection on a canvas, which is what we see as output, shrinks). Because of this, when you keep moving the mouse, there are times when the mouse will actually be outside the current boundaries of the element. I've added a border to the element in the below snippet for you to see what is happening.

You don't see the problem when the mouse is static because the UA triggers the hover-in/out events only when the mouse is moved. It doesn't trigger the events when the element's boundaries change because then it would get a lot of overhead.

div.shuffle {

  background-image: url(https://goo.gl/PydgT2);

  background-color: transparent;

  width: 32px;

  height: 32px;

  border: 1px solid;

  transition: all 0.3s linear;

}

div.shuffle:hover {

  transform: rotateX(180deg);

  -webkit-transform: rotateX(180deg);

}

<div class="shuffle" style="background-color: transparent;"></div>

How to do a full transition when hovered over an element?

Edit: Similar solution but relying on transition and animation: https://jsfiddle.net/ok7pnrsL/

---

This is my solution: https://jsfiddle.net/9yu0cozq/1/

Basically you need to add a container for the box and then play with CSS animations.

<div id="container">
    <div class="box"></div>
</div>

When the mouse enters the .box then the hidden container appears (please note that for this to work that container should have enough width and height to fit the whole area where the mouse might go).
This container creates an animation for itself to "hide" back in 1s. and while it is shown the .box has an animation for the same time.

#container {
    position:absolute;
    z-index:1;
    width: 0;
    height: 0;
}
#container:hover{
    animation-name:changeSize;
    animation-duration: 1s;
}
#container:hover .box{
    animation-name:changeColor;
    animation-duration: 1s;
}
.box {
    z-index:0;
    position:absolute;
    width: 100px;
    height: 100px;
    background: red;
    transition:1s background;
}
.box:hover {
    background: yellow;
}
@keyframes changeColor {
    0% {
    background: red;
    }
    100% {
    background: yellow;
    }
}
@keyframes changeSize {
    0%,99% {
    width: 100%;height: 100%;
    }
    100% {
    width: 0;height: 0;
    }
}

So, without knowing the real context, this solution gives a series of assumptions that might or might not fit your exact case but gives an idea of how to solve it using pure CSS.

---

Related Topics