Css3 Webkit Animation Stop on Div:Hover

css3 webkit animation stop on div:hover

Unfortunately there is no parent selector in CSS, see here. You will have to use a bit of javascript to select the parent and tell it to pause.

The pause declaration in CSS goes like this:

-webkit-animation-play-state: paused | running;

The javascript (jQuery, in this case) would look something like this:

$(".child").hover(
  function(){
    $(this).parent().css("-webkit-animation-play-state", "paused");
},
  function(){
    $(this).parent().css("-webkit-animation-play-state", "running");
});

See a live demo here:

http://jsfiddle.net/UFepV/

Is there a pure css way to stop animation on hover?

The animation-play-state property can pause or resume an animation. It accepts either:

running — the default; an animation plays as normal
paused — the animation is paused

#myelement:hover, #myelement:focus {
    animation-play-state: paused;
}

See full tutorial on SitePoint.

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.

How can I instantly stop a CSS animation on hover?

Because you are animating opactiy, you need to set it back to 100% or 1 when hovering over the element and make sure the @keyframes isn't running.

.blink:hover {
    background:red; 
    opacity: 1;
    -webkit-animation-name: none;
    /* should be set to 100% opacity as soon as the mouse enters the box; when the mouse exits the box, the original animation should resume. */
}

JSFiddle

Can't stop all CSS animations on hover over one or another

Put the :hover event on the marquee itself and give the 2 arrays the same class name so when you hover it stops both of them instead of just one.

.marquee{
    position: relative;
    height: 4rem;
    overflow: hidden;
    background-color: #df3e3e;
}

.scroll{
    width: 100%;
    display: flex;
} 

.item:after {
    content: "|";
    margin: 0 0.5em 0 0.5em;
    font-size: 2rem;
    font-weight: 700;    
}

.scroll div{    
    height: 4rem;
    font-size: 2rem;
    line-height: 4rem;    
    color: #000;    
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 700;
    
    -webkit-animation: animate 70s linear infinite;
    -webkit-animation-delay: -70s;
    
    -moz-animation: animate 70s linear infinite;
    -moz-animation-delay: -70s;
    
    -o-animation: animate 70s linear infinite;
    -o-animation-delay: -70s;
    
    animation: animate 70s linear infinite;
    animation-delay: -70s;
}

.scroll .item-container {
    -webkit-animation: animate2 70s linear infinite;
    -webkit-animation-delay: -35s;
    
    -moz-animation: animate2 70s linear infinite;
    -moz-animation-delay: -35s;
    
    -o-animation: animate2 70s linear infinite;
    -o-animation-delay: -35s;
    
    animation: animate2 70s linear infinite;
    animation-delay: -35s;
}

@-webkit-keyframes animate {
    0% 
    {        
        transform: translateX(100%);
    }
    100% 
    {        
        transform: translateX(-100%);
    }
}
@-webkit-keyframes animate2 {
    0% 
    {        
        transform: translateX(0);
    }
    100% 
    {        
        transform: translateX(-200%);
    }
}

@-moz-keyframes animate {
    0% 
    {        
        transform: translateX(100%);
    }
    100% 
    {        
        transform: translateX(-100%);
    }
}
@-moz-keyframes animate2 {
    0% 
    {        
        transform: translateX(0);
    }
    100% 
    {        
        transform: translateX(-200%);
    }
}

@-o-keyframes animate {
    0% 
    {        
        transform: translateX(100%);
    }
    100% 
    {        
        transform: translateX(-100%);
    }
}
@-o-keyframes animate2 {
    0% 
    {        
        transform: translateX(0);
    }
    100% 
    {        
        transform: translateX(-200%);
    }
}

@keyframes animate {
    0% 
    {        
        transform: translateX(100%);
    }
    100% 
    {        
        transform: translateX(-100%);
    }
}
@keyframes animate2 {
    0% 
    {        
        transform: translateX(0);
    }
    100% 
    {        
        transform: translateX(-200%);
    }
}

.marquee:hover .item-container{
                    -webkit-animation-play-state: paused;
                    -moz-animation-play-state: paused;
                    -o-animation-play-state: paused;
                    animation-play-state: paused;
                    cursor: pointer;
                }

<div class="container-fluid">
                <div class="marquee">
                    <div class="scroll">
                        <div class="item-container">
                            <span class="item">Item 1</span> <span class="item">Item 2</span> <span class="item">Item 3</span> <span class="item">Item 4</span>
                        </div>
                        <div class="item-container">
                            <span class="item">Item 1</span> <span class="item">Item 2</span> <span class="item">Item 3</span> <span class="item">Item 4</span>
                        </div>
                    </div>
                </div>    
            </div>

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 stop css animation in current position on hover?

You can add

.block:hover
{
    animation-play-state: paused;
}

to pause the animation when you hover over it.

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

css animation how to use reverse for a hover and out event?

Let's first understand what reverse mean

The animation plays backwards each cycle. In other words, each time the animation cycles, the animation will reset to the end state and start over again. Animation steps are performed backwards, and timing functions are also reversed. For example, an ease-in timing function becomes ease-out. ^ref

Let's take a basic example to understand:

.box {  width:50px;  height:50px;  margin:5px;  background:red;  position:relative;}.normal {  animation: move normal  2s linear forwards;}.reverse {  animation: move reverse 2s linear forwards;}
@keyframes move{  from {    left:0;  }  to {    left:300px;  }}

<div class="box normal">
</div>
<div class="box reverse">
</div>

Css3 Webkit Animation Stop on Div:Hover