为什么 mouseout 动画不能正常工作？

Question

我尝试了以下方法。它在鼠标进入时有效，但在鼠标离开时无法正常工作。

@-webkit-keyframes animborder {
  0% {
    height: 100%;
    width: 8px;
    top: auto;
  }
  50% {
    height: 8px;
    width: 8px;
    top: auto;
  }
  100% {
    height: 8px;
    width: 100%;
    top: auto;
  }
}

@keyframes animborder {
  0% {
    height: 100%;
    width: 8px;
    top: auto;
  }
  50% {
    height: 8px;
    width: 8px;
    top: auto;
  }
  100% {
    height: 8px;
    width: 100%;
    top: auto;
  }
}

.section-title {
  margin-bottom: 45px;
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 15px 30px;
}
.section-title::before {
  content: '';
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  height: 100%;
  background: rgba(87, 107, 181, 0.45);
  z-index: -1;
  transition: 0.7s ease-in-out;
}
.section-title:hover::before {
  width: 100%;
  height: 8px;
  -webkit-animation: animborder 0.7s ease-in-out;
  -moz-animation: animborder 0.7s ease-in-out;
  -o-animation: animborder 0.7s ease-in-out;
  animation: animborder 0.7s ease-in-out;
}

<h1 class="section-title">Check our Videos</h1>

我已经跟踪了鼠标悬停和鼠标移出的入点和出点关键帧，但它没有用，并且效果在页面刷新时动画化。你能指导我哪里做错了吗

Answer 1

我认为仅使用 CSS 动画是无法实现的。我假设 CSS 转换不满足您的用例，因为（例如）您想要将两个动画链接在一起，使用多次停止、迭代，或以其他方式利用额外的强大动画授予您。

您必须使用两种不同的动画 jquery，如下所示。

$(".section-title").hover(
    function () {
        $(this).removeClass('out').addClass('over');
    },
    function () {
        $(this).removeClass('over').addClass('out');
    }
);

@-webkit-keyframes animborder {
  0% {
    height: 100%;
    width: 8px;
    top: auto;
  }
  50% {
    height: 8px;
    width: 8px;
    top: auto;
  }
  100% {
    height: 8px;
    width: 100%;
    top: auto;
  }
}

@keyframes animborder {
  0% {
    height: 100%;
    width: 8px;
    top: auto;
  }
  50% {
    height: 8px;
    width: 8px;
    top: auto;
  }
  100% {
    height: 8px;
    width: 100%;
    top: auto;
  }
}

@-webkit-keyframes animborder_out {
  0% {
    height: 8px;
    width: 100%;
    top: auto;
  }
  50% {
    height: 8px;
    width: 8px;
    top: auto;
  }
  100% {
    height: 100%;
    width: 8px;
    top: auto;
  }
}

@keyframes animborder_out {
  0% {
    height: 8px;
    width: 100%;
    top: auto;
  }
  50% {
    height: 8px;
    width: 8px;
    top: auto;
  }
  100% {
    height: 100%;
    width: 8px;
    top: auto;
  }
}

.section-title {
  margin-bottom: 45px;
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 15px 30px;
}
.section-title:before {
  content: '';
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  height: 100%;
  background: rgba(87, 107, 181, 0.45);
  z-index: -1;
  transition: 0.7s ease-in-out;
}
.section-title.over::before {
  width: 100%;
  height: 8px;
  -webkit-animation: animborder 0.7s ease-in-out forwards;
  -moz-animation: animborder 0.7s ease-in-out forwards;
  -o-animation: animborder 0.7s ease-in-out forwards;
  animation: animborder 0.7s ease-in-out forwards;
}

.section-title.out::before {
  width: 100%;
  height: 8px;
  -webkit-animation: animborder_out 0.7s ease-in-out forwards;
  -moz-animation: animborder_out 0.7s ease-in-out forwards;
  -o-animation: animborder_out 0.7s ease-in-out forwards;
  animation: animborder_out 0.7s ease-in-out forwards;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="section-title">Check our Videos</h1>

为什么 mouseout 动画不能正常工作？

Why mouseout animation is not working properly?

jquery

keyframe

css-animations