[css（box-shadow）在页面加载时的过渡

Question

是否有一种方法可以使页面加载时的盒子阴影发生过渡而不是具有悬停或单击效果？

我希望在页面加载或作为事件的过渡：

.item:hover{
margin:0 auto;
box-shadow: 1px 1px 20px  grey;
transition: 0.7s;
max-width: 940px;
color: dimgrey;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 10px 10px 10px 10px;
}

Answer 1

您可以使用keyframes：

1. 您可以命名keyframe一个名称并提供所需的时间，我在示例中提供了4sec。
2. 它表示从red更改背景色，并将height增大200px并进行动画处理4秒钟。

.item {
  height: 100px;
  width: 100px;
  background-color: blue;
  animation-name: animate;
  animation-duration: 4s;
  border-radius: 10px;
}

@keyframes animate {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
    height: 200px;
  }
}

<div class="item">

</div>