css (box-shadow) 页面加载过渡

Question

有没有办法让页面加载时的盒子阴影发生过渡，而不是使用 hover 或点击效果？

我想要在页面加载时或作为事件的转换：

.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

1. 您可以为keyframes命名并提供所需的时间，我在示例中提供了4sec秒。
2. 它说将背景颜色从red更改为yellow ，并将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>