我如何使我的 div 的框阴影在悬停时淡入（在悬停时淡出）？

Question

我只是在玩动画。我有一个带有三个框阴影的 div，我想在悬停 div 时淡入，一个接一个，从最靠近 div 的那个开始。我还希望当有人停止在 div 上悬停时发生相反的情况。知道如何实现吗？

#div2 {
  background-color: aquamarine;
  box-shadow: 15px 15px 10px blueviolet inset, -15px -15px 10px blueviolet inset;
  width: 500px;
  height: 200px;
  padding: 25px;
  padding-left: 50px;
  transition: box-shadow 2s ease;
}

#div2:hover {
  background-color: aquamarine;
  box-shadow: 5px 5px 1px darkblue, 10px 10px 3px blue, 15px 15px 5px lightblue, 15px 15px 10px blueviolet inset, -15px -15px 10px blueviolet inset;
}

<div id="div2">
  <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

Answer 1

为多个 box-shadow 设置动画时，请确保阴影量匹配。所以浏览器会知道哪个box-shadow是哪个。

例如，我刚刚从:hover复制了box-shadow，并使其中一些透明，距离为0px:

#div2 {
  background-color: aquamarine;
  box-shadow: 
    0px 0px 1px transparent, 
    0px 0px 3px transparent, 
    0px 0px 5px transparent, 
    15px 15px 10px blueviolet inset, 
    -15px -15px 10px blueviolet inset;
    
  width: 500px;
  height: 200px;
  padding: 25px;
  padding-left: 50px;
  transition: box-shadow 2s ease;
}

#div2:hover {
  box-shadow: 
    5px 5px 1px darkblue, 
    10px 10px 3px blue, 
    15px 15px 5px lightblue, 
    15px 15px 10px blueviolet inset, 
    -15px -15px 10px blueviolet inset;
}

<div id="div2">
  <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

我如何使我的 div 的框阴影在悬停时淡入（在悬停时淡出）？

How would I make the box-shadow of my div fade in on hover (and out when not hovering over it)?

css

animation

hover