CSS3 Transition Easy в тени коробки и обратно

Я пытаюсь заставить div id легко входить и выходить из тени с помощью CSS3.

Текущий CSS у меня есть:

#how-to-content-wrap-first:hover {
    -moz-box-shadow: 0px 0px 5px #1e1e1e; 
    -webkit-box-shadow: 0px 0px 5px #1e1e1e; 
    box-shadow: 0px 0px 5px #1e1e1e;
    -webkit-transition: box-shadow 0.3s ease-in-out 0s;
    -moz-transition: box-shadow 0.3s ease-in-out 0s;
    -o-transition: box-shadow 0.3s ease-in-out 0s;
    -ms-transition: box-shadow 0.3s ease-in-out 0s;
    transition: box-shadow 0.3s ease-in-out 0s;
}

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

Любые советы людей будут высоко оценены?


css css-transitions hover
person Tom Pinchen    schedule 23.04.2013    source источник

Ответы (3)


arrow_upward
61
arrow_downward

Вам нужно использовать переходы на .class, а не на .class:hover

div {
  height: 200px;
  width: 200px;
  box-shadow: 0;
  transition: box-shadow 1s;
  border: 1px solid #eee;
}

div:hover {
  box-shadow: 0 0 3px #515151;
  ;
}
<div></div>

person Mr. Alien    schedule 23.04.2013
comment
должен был быть box-shadow: none для меня в div. - person Karl Glaser; 07.04.2014
comment
Существует лучший (= оптимизированный по производительности) способ анимации box-shadow. См. tobiasahlin.com/blog/how-to-animate-box-shadow< /а> - person Pointi; 08.02.2018

arrow_upward
3
arrow_downward

Вот эффективное с точки зрения ресурсов решение.

#how-to-content-wrap-first::after{
    /* Pre-render the bigger shadow, but hide it */
    box-shadow: 3px 3px 5px -1px #80aaaa;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;         
}

#how-to-content-wrap-first:hover::after {
    /* Transition to showing the bigger shadow on hover */
    opacity: 1;
}
person mPrinC    schedule 14.10.2020

arrow_upward
1
arrow_downward

Это может сработать:

 #how-to-content-wrap-first:hover{
      box-shadow : inset 0 1px 1px rgba(0,0,0,.075);
      -webkit-transition : box-shadow ease-in-out .15s;
      transition : box-shadow ease-in-out .15s;
 }
person Varun Krishna    schedule 17.02.2021