How to not let a CSS Animation stop even after the mouse has left the element

Asked

Viewed 565 times

3

I have a div who has an animation in :hover, but if the user takes the mouse away from the div before the animation ends she cuts in half and does not finish.

I tried to make a "spot light" effect that crosses the image from left to right on the mouse :hover, But if the mouse comes off the animation, it’s interrupted abruptly. I would like this "spot light" to continue going through the image until the end even if the mouse get off the div.

See the problem happening when you do the :hover and removes the mouse immediately thereafter before spot go through the image in full.

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: Animation only happens once every mouse over.

html5 css3 animation keyframes

  • I believe q has to use js even.... but I liked the placecage.com and the other sites of this kkkkkk guy

  • @Karlzillner I think it will have to be with JS or jQuery even, with CSS I think it will not happen. I even tried with transition and not with keyframes but it didn’t work... NOTE: My favorites, Placecage and Fillmurray XD

1 answer

2


Follow an example, as requested...

$(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>
<div id="box" ></div>

Browser other questions tagged html5 css3 animation keyframes

You are not signed in. Login or sign up in order to post.