打开或刷新页面时如何禁用动画

Question

我制作了一个小动画，在鼠标悬停时在框下方从左向右添加一条线，当鼠标不悬停在框上时，该线从左向右返回，但是问题是当我刷新页面时，该行从左返回到右。有没有办法在我打开页面或刷新页面时禁用动画（如果可能没有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);
  }
}

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

Answer 1

我认为仅使用 css 是不可能的 - 您可以在鼠标悬停结束时使用 css 声明，但它总是会在加载时触发。

然而，您可以使用简单的 JS，使用类“开”和“关”来区分 'page load' 和 'hover off'。

此实例中的代码为：

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);
    }
}

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

Answer 2

我将您的动画更改为过渡。这就是你想要的吗？

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;
}

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

打开或刷新页面时如何禁用动画

How to disable an animation when opening or refereshing the page

css

css-animations