0

Всем привет.

У меня есть анимация сделанная с помощью @keyframes и есть hover-эффект при наведении.

Так вот мне нужно чтобы анимация сделанная с помощью @keyframes исчезла при наведении.

Заранее прошу прошение за такой длинный код, просто хотел чтобы он корректно отображался. Мне говорили, что это можно сделать с помощью JS, но я не особо в нем разбираюсь.

Кому не сложно, помогите пожалуйста.

body {
  background: #3a3939;
}

* {
  font-family: 'Open Sans', sans-serif;
  font-weight: lighter;
}

form {
  display: inline-block;
  margin-left: 40%;
}

::placeholder {
  color: #7d8a96;
}

#surname,
#name,
#patronymic {
  width: 360px;
  padding: 8px 0 8px 0;
  text-align: center;
  font-size: 16px;
  border: 2px solid #2196f3;
  background: #3a3939;
  color: #c9cdd0;
  border-radius: 4px;
}

.selected {
  text-align: center;
  color: #83c0f6
}

#select {
  margin-top: 5px;
  padding: 0 10px 0 10px;
  background: #3a3939;
  color: #83c0f6;
  border: 1px solid #2196f3;
}

#comment {
  background: #3a3939;
  color: #c9cdd0;
  font-size: 16px;
  border: 2px solid #2196f3;
  border-radius: 4px;
}

#comment::placeholder {
  padding: 10px 10px;
}

.blick {
  position: absolute;
  background: #b2d8fa;
  opacity: 0.5;
  top: 2.5px;
  left: 0;
  width: 20px;
  height: 89%;
  transform: translateX(-4em) skewX(-45deg);
  animation: btn-blick 2.5s infinite 0.5s;
  overflow: hidden;
}

@keyframes btn-blick {
  from {
    transform: translateX(-4em) skewX(-45deg);
  }
  to {
    transform: translateX(20em) skewX(-45deg);
  }
}

.btn-decor {
  position: relative;
  text-align: center;
  color: #83c0f6;
  display: inline-block;
  margin-left: 94px;
  overflow: hidden;
  /*padding: 4px 8px 4px 8px;*/
}

.btn-line {
  position: absolute;
  display: block;
}

.btn-line-top {
  top: 0px;
  left: -100%;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, #2196f3);
}

.btn-line-right {
  right: 0px;
  top: -100%;
  height: 100%;
  width: 2px;
  background: linear-gradient(180deg, transparent, #2196f3);
}

.btn-line-bottom {
  bottom: 0px;
  right: -100%;
  height: 2px;
  width: 100%;
  background: linear-gradient(270deg, transparent, #2196f3);
}

.btn-line-left {
  left: 0px;
  bottom: -100%;
  height: 100%;
  width: 2px;
  background: linear-gradient(0deg, transparent, #2196f3);
}

#btn {
  display: inline-block;
  cursor: pointer;
  padding: 10px 24px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1.5px;
  font-size: 16px;
  color: #83c0f6;
  background: #3a3939;
  border: 2px solid #2196f3;
  border-radius: 4px;
  transition: 0.2s;
}

#btn::before {
  content: '';
  position: absolute;
  color: #fff;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
}

#btn:hover {
  border: none;
  transition: 0.5s;
  transition-delay: 1s;
  background: #2196f3;
  color: #3a3939;
  /*background: linear-gradient(45deg, #83c0f6, #C5DDE8)*/
  ;
}

.btn-decor:hover .btn-line-top {
  left: 100%;
  transition: 1s;
  transition-delay: 0.25s;
}

.btn-decor:hover .btn-line-right {
  top: 100%;
  transition: 1s;
  transition-delay: 0.18s;
}

.btn-decor:hover .btn-line-bottom {
  right: 100%;
  transition: 1s;
  transition-delay: 0.25s;
}

.btn-decor:hover .btn-line-left {
  bottom: 100%;
  transition: 1s;
  transition-delay: 0.18s;
}
<form action="">
  <p>
    <input type="text" placeholder="Фамилия" id="surname" title="Введите вашу фамилию">
  </p>
  <p>
    <input type="text" placeholder="Имя" id="name" title="Введите ваше имя">
  </p>
  <p>
    <input type="text" placeholder="Отчество" id="patronymic" title="Введите ваше отчество">
  </p>
  <p class="selected">
    <label for="select">Укажите возраст</label> <br>
    <select name="select" id="select">
      <option disabled selected>Ваш возраст</option>
      <option value="sm-16">До 16</option>
      <option value="16-21">16-21</option>
      <option value="21-27">21-27</option>
      <option value="27-35">27-35</option>
      <option value="35-45">35-45</option>
      <option value="45-55">45-55</option>
      <option value="up-55">Больше 55</option>
    </select>
  </p>
  <p>
    <textarea name="comment" id="comment" cols="42" rows="8" placeholder="Введите информацию о себе"></textarea>
  </p>
  <p class="btn-decor" id="btn-decor">
    <span class="blick" id="blick"></span>
    <span class="btn-line btn-line-top"></span>
    <span class="btn-line btn-line-right"></span>
    <span class="btn-line btn-line-bottom"></span>
    <span class="btn-line btn-line-left"></span>
    <input type="submit" id="btn" value="Отправить">
  </p>
</form>

1 ответ 1

1

js не нужен, попробуйте добавить:

.btn-decor:hover .blick {
    animation: none;
}
1
  • Спасибо, вы мне очень помогли. Ваш вариант сработал!
    – O.Yudin
    7 окт 2019 в 21:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.