How not to let an animation in CSS stop even after the mouse leaves the element

Question

How not to let an animation in CSS stop even after the mouse leaves the element

Navigation

#1 by (1 votes)

2

I have div that has an animation in :hover , but if the user takes the mouse from above div before the animation finishes it cuts in half and does not finish.

I tried to do a spot light effect that crosses the image from left to right on the :hover mouse, but if the mouse leaves the animation it stops abruptly. I would like this spot light to continue traversing the image to the end even if the mouse exits from above div .

See the problem occurring when you do :hover and then remove the mouse shortly after spot to traverse the image completely.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.box {
    width: 50%;
    height: 200px;
    background-color: gray;
    position: relative;
    margin: 20px auto;
    overflow: hidden;
    background-image: url(http://placecage.com/700/300);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.box:hover::after,
.box:hover::before {
    content: "";
    width: 40%;
    height: 200px;
    position: absolute;
    z-index: 2;
    background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 40%,rgba(255,255,255,0.8) 60%, rgba(255,255,255,0) 100%);
    transform: skewX(-5deg);
    left: -40%;
    animation: bgc 1000ms linear forwards;
    mix-blend-mode: overlay;
}
@keyframes bgc {
    0% {left: -40%}
    100% {left: 140%}
}

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

OBS: The animation only happens once every mouse over.

html5 css3 keyframes

asked by anonymous 28.02.2018 / 19:57

1 answer

How to return a specific column as an element with FOR XML AUTO clause How to insert selectInput throughout the dataTable

score 1 · Accepted Answer

Here's an example, as required ...

$(function(){
  $('#box').on('mouseover', function(){
    var mv = $(this);
    mv.addClass('box');
    setTimeout(function(){
      mv.removeClass('box')
    }, 1000)
  })
});

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#box {
    width: 50%;
    height: 200px;
    background-color: gray;
    position: relative;
    margin: 20px auto;
    overflow: hidden;
    background-image: url(http://placecage.com/700/300);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.box:after,
.box:before {
    content: "";
    width: 40%;
    height: 200px;
    position: absolute;
    z-index: 2;
    background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 40%,rgba(255,255,255,0.8) 60%, rgba(255,255,255,0) 100%);
    transform: skewX(-5deg);
    left: -40%;
    animation: bgc 1000ms linear forwards;
    mix-blend-mode: overlay;
}
@keyframes bgc {
    0% {left: -40%}
    100% {left: 140%}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script><divid="box" ></div>