Question

我试图在悬停时运行动画，并在悬停时运行反向动画；问题是我不希望动画在页面加载时运行。没有JavaScript，有没有办法做到这一点？谢谢您的帮助。

.box {
  background-color: black;
  padding-top: 10px;
  padding-left: 20px;
  border-radius: 30px;
  box-shadow: 7px 7px 8px #717171;
  color: white;
  font-size: 10;
  font-family: Audiowide;
  font-size: 10;
  width: 1.2cm;
  height: 1.5cm;
}

.noselect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.box_anim_blue {
  animation-name: box_hover_blue_reverse;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  cursor: pointer;
}

.box_anim_blue:hover {
  animation-name: box_hover_blue;
  animation-direction: normal;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes box_hover_blue {
  from {background-color: black;
        box-shadow: 7px 7px 8px #717171;}
  to {background-color: #0044ff;
      box-shadow: 9px 9px 15px #717171;}
}

@keyframes box_hover_blue_reverse {
  from {background-color: #0044ff;
      box-shadow: 9px 9px 15px #717171;}
  to {background-color: black;
      box-shadow: 7px 7px 8px #717171;}
}

<div class="box box_anim_blue">
    <p>Test</p>
  </div>

Answer 1

您不需要为此动画。只需使用悬停和过渡即可。

.box {
  background-color: black;
  padding-top: 10px;
  padding-left: 20px;
  border-radius: 30px;
  box-shadow: 7px 7px 8px #717171;
  color: white;
  font-size: 10;
  font-family: Audiowide;
  font-size: 10;
  width: 1.2cm;
  height: 1.5cm;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.box_anim_blue {
  background-color: black;
  box-shadow: 7px 7px 8px #717171;
  cursor: pointer;
  transition: 0.5s;
}

.box_anim_blue:hover {
  background-color: #0044ff;
  box-shadow: 9px 9px 15px #717171;
}

<div class="box box_anim_blue">
  <p>Test</p>
</div>

在没有javascript的情况下跳过页面加载动画

1 个答案: