Почему анимация мышки не работает должным образом? - PullRequest
Новая
       75

Почему анимация мышки не работает должным образом?

0 голосов
/ 28 декабря 2018

Я пробовал следующее.Он работал в мыши, но не работает должным образом при работе с мышью. 

@-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 для мыши и мыши, но это не сработало, и эффект обновлялся при обновлении страницы.Не могли бы вы направить меня, где я делаю неправильно.

1 Ответ

0 голосов
/ 28 декабря 2018

Я не думаю, что это возможно, используя только 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>
...