为什么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>

我已经按照In和out关键帧进行了鼠标悬停和鼠标悬停的操作，但是它没有起作用，并且刷新了页面效果。您能指导我做错了什么吗？

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>