Stop Animation and Start Transition on Hover

Stop animation and start transition on hover

Try -webkit-animation: 0;. Demo here. 0 is the default value for animation or what you must set to disable any existing CSS3 animations.

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>

How to play an animation on hover and pause when hover is not active

Use animation instead of transition and make use of animation-play-state^MDN

button{

  animation: rotate360 1.2s linear infinite;  /* animation set */

  animation-play-state: paused;               /* but paused */

}

button:hover{

  animation-play-state: running;              /* trigger on hover */

}

@keyframes rotate360 {

  to { transform: rotate(360deg); }           

}

<button>X</button>

Pause CSS animation and change the animated property on hover - but don't restart another animation on mouse leave

ok as long as you didn't replied yet, here is your solution, i hope it meets your code aims, regards,

$(document).ready(function(){
        $(".button").css("animation", "fadeInBottom 1s");

    setTimeout(function(){
        $(".button").css("animation", "fadeInOutShadow ease-in-out 1.2s alternate infinite");
    }, 1200);
    });
            $(".button").hover(function(){
            $(".button").css({"animation": "0", "box-shadow": "0 0 35px rgba(250, 215, 0, 0.9)"});
            }, function(){
                $(".button").css({"box-shadow": "", "animation": "fadeInOutShadow ease-in-out 1.2s alternate infinite"});
                });

.button {

    &:hover {
        box-shadow: 0 0 35px rgba(255, 215, 0, 0.9);
    }
}

@keyframes fadeInBottom {
      0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
                transform: translateY(10px);
      }
      100% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
      }
    }

@keyframes fadeInOutShadow {
  0% {
    -webkit-box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="button">Button</button>

Pure CSS on hover stop animation

You should use the :hover pseudo class on .container instead, then pause the animation on all of .photo

body {

  background: #000;

}

.container {

  margin: 50px auto;

  width: 500px;

  height: 300px;

  overflow: hidden;

  border: 10px solid;

  border-top-color: #856036;

  border-left-color: #5d4426;

  border-bottom-color: #856036;

  border-right-color: #5d4426;

  position: relative;

}

.photo {

  position: absolute;

  animation: round 16s infinite;

  opacity: 0;

}

@keyframes round {

  25% {

    opacity: 1;

  }

  40% {

    opacity: 0;

  }

}

img:nth-child(1) {

  animation-delay: 12s;

}

img:nth-child(2) {

  animation-delay: 8s;

}

img:nth-child(3) {

  animation-delay: 4s;

}

img:nth-child(4) {

  animation-delay: 0s;

}

.container:hover .photo {

animation-play-state:paused;

-webkit-animation-play-state:paused;

}

<div class="container">

  <img class='photo'  src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="Sample Image" />

  <img class='photo'  src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="Sample Image" />

  <img class='photo'  src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="Sample Image" />

  <img class='photo'  src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="Sample Image" />

</div>

How to disable hover effect for the transition or animation time then enable it after the transition or animation is finished in css?

I would handle this using an animation, along with some JavaScript. When the user hovers over #one, we add a hover class to the body, which the #one element will respond to. At this point, #one includes pointer-events: none to ensure that any extra hovering will not re-trigger the animation. After the animation ends, we remove the hover class from body, allowing the animation to once again begin after a new hover event is registered.

const one = document.getElementById("one");

one.addEventListener("mouseover", () => {

  document.body.classList.add("hover"); 

});

one.addEventListener("animationend", () => {

  document.body.classList.remove("hover");

});

@keyframes oneAnimation {

  to {

    transform: translate(-15px, -15px) rotate3d(1, 1, 1, 360deg) scale(1.1);

  }

}

#one {

  color: green;

  border: 0px solid red;

  border-radius: 8px;

}

.hover #one {

  pointer-events: none;

  color: white;

  background-color: rgba(255, 0, 0, 1);

  border: 2px solid white;

  border-radius: 8px;

  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.8);

  animation: oneAnimation 1s forwards 0.3s;

}

<div id="one">one</div>

How to prevent a CSS animation from rerunning after a second hover animation

• The animation-* properties (like animation:, animation-name:, animation-duration:, etc) are multi-valued properties, just like background-image.

• When the effective value of a multi-value property for an element changes (e.g. setting an entirely new background-image: or animation: when an element already has a multiple values for that property) then CSS will replace the entire list of values.

• So if one rule sets animation-name: foo; and another (temporarily applied) rule sets animation-name: bar; then that counts as removing foo and adding bar, rather than simply adding bar to the existing list of animations.

• And CSS animations (by default) start when they are added, and cannot be controlled after they have been removed.

• So in your case, the test1 animation restarts because your :hover rule removes the test1 animation from img's animation-list (and adds test2), and then when the :hover state is left the test1 animation is re-added, which makes it restart the test1 animation again.

The fix is to not remove the test1 animation from the :hover state, like so:

    img {
        animation-name: test1;
        animation-duration: 4s;
    }
    img:hover {
        animation-name: test1, test2;
        animation-duration: 4s, 4s;
    }

---

Demo:

• I've renamed test1 to onLoad and test2 to onHover and sped-up the animations to 1-2s (from 4s) for clarity.
• The image will rotate on-load, and will increase in size on hover.
• Notice that after you stop hovering the image, it won't rotate again.

img {
    height: 40px;
    width: auto;
    position: absolute;

    animation-name: onLoad;
    animation-duration: 1s;
}
img:hover {
    animation-name: onLoad, onHover;
    animation-duration: 1s, 2s;
}
@keyframes onLoad {
    from { transform: rotate(0deg); }
    to   { transform: rotate(179deg); }
}
@keyframes onHover {
    from { height: 40px; width: 40px; }
    to   { height: 80px; height: 80px; }
}

<img src="https://i.stack.imgur.com/pVgz6.png" alt="Sample Image">

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>

---

Related Topics