How to disable an animation when opening or refereshing the page

Question

I have made a little animation that add a line under the box from the left to the right when it's hovered and the line go back from the left to the right when the mouse isn't hovering the box, but the issue is that the line goes back from the left to the right when I refresh the page. Is there a solution to disable the animation when I open the page or when I refresh it (if possible without JavaScript)

body {
  background-color: black;
}

.box {
  width: 100px;
  height: 100px;
  margin: 40px auto;
  background-color: #f44336;
  position: relative;
}

.box::after {
  content: '';
  position: absolute;
  bottom: -7px;
  width: 100%;
  height: 3px;
  background-color: #fff;
  animation: out 400ms linear forwards;
  transform-origin: right center;
}

.box:hover::after {
  animation: in 400ms linear;
  transform-origin: left center;
}

@keyframes in {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes out {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

user_5526624 · Answer

I changed your animation to a transition instead. Is this what you're after?

body {
  background-color: black;
}

.box {
  width: 100px;
  height: 100px;
  margin: 40px auto;
  background-color: #f44336;
  position: relative;
}

.box::after {
  content: '';
  position: absolute;
  bottom: -7px;
  width: 100%;
  height: 3px;
  background-color: #fff;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 400ms linear;
}

.box:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

user_15371542 · Answer

I don't believe this is possible using only css - you can use a css declaration when a mouse-over ends, however it will always trigger upon load.

You can however use simple JS using classes "on" and "off" to differentiate 'page load' and 'hover off'.

The code in this instance would be:

demo

$(".box").hover(
    function () {
        $(this).removeClass('off').addClass('on');
    },
    function () {
        $(this).removeClass('on').addClass('off');
    }
);

body {
    background-color: black;
}

.box {
    width: 200px;
    height: 200px;
    margin: 40px auto;
    background-color: #f44336;
    position: relative;
}

.box::after {
    content: '';
    position: absolute;
    bottom: -7px;

    height: 3px;
    background-color: #fff;
}
.box.off::after {
    width: 100%;
    animation: out 400ms linear forwards;
    transform-origin: right center;
}

.box.on::after {
    width: 100%;
    animation: in 400ms linear;
    transform-origin: left center;
}

@keyframes in {
    from {
        transform: scaleX(0);
    }
    
    to {
        transform: scaleX(1);
    }
}

@keyframes out {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

How to disable an animation when opening or refereshing the page

2 Answers