0

Не работает transition при hover на кнопке. Сам box-shadow появляется,но без анимации. Что примечательно на пару блоков выше, точно такой же код работает прекрасно, а здесь не работает вообще. JsFiddle для удобства https://jsfiddle.net/TomatoBrain/cj94b2ft/

<footer class="footer">
  <div class="container">
    <div class="row">
      <div class="footer--flex">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">
          <div class="footer__news">
            <div class="footer__news--title footer--title">
              <h3>Get Newsletter</h3>
            </div>
            <div class="footer__news--input">
              <input type="text" class="footer__news--email" placeholder="EMAIL">
              <button class="footer__news--submit">Submit</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>
.footer {
  padding: 60px 0;
}

.footer--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.footer__news--email {
  padding: 15px 40px 15px 20px;
}

.footer__news--submit {
  -webkit-box-shadow: 0px 3px 3px 0px rgba(14, 15, 15, 0.25);
  box-shadow: 0px 3px 3px 0px rgba(14, 15, 15, 0.25);
  border: 1px solid #ff6d6d;
  border-radius: 3px;
  background-color: #ff6d6d;
  padding: 0 15px;
}

.footer__news--submit:hover {
  -webkit-box-shadow: 0 0 0 2px #ff6d6d inset, 0 0 0 4px white inset;
  box-shadow: 0 0 0 2px #ff6d6d inset, 0 0 0 4px white inset;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}

1 ответ 1

3

Если нужно анимировать и внешние и внутренние тени элемента, то опиши их всех и в обычных стилях и для :hover. Т.е. соль в конкретизации начальных и конечных значений.

Прототип накидала

button {
  box-shadow:
      0 0 0 10px pink,
      0 0 0 15px red,
      inset 0 0 0 0,
      inset 0 0 0 0;
  transition: 0.2s ease;
}

button:hover {
  box-shadow:
      0 0 0 0,
      0 0 0 0,
      inset 0 0 0 2px hsl(0, 0%, 30%),
      inset 0 0 0 5px hsl(0, 0%, 10%) ;
}
<button>cancel</button>

p.s. лучше вынести свойство transition из :hover к обычным стилям, если нужно, чтобы анимация работала не только, когда элемент становится hover, но и когда возвращается в нормальное состояние.

Ваш ответ

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

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