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

【问题标题】：css (box-shadow) transition on page load页面加载时的 css (box-shadow) 过渡
【发布时间】：2020-06-06 06:55:23
【问题描述】：

有没有办法在页面加载时为 box-shadow 进行转换，而不是使用悬停或点击效果？

页面加载时我想要的过渡，或者作为一个事件：

.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;
}

【问题讨论】：

你看过这个stackoverflow.com/questions/11679567/…
是的，我有点累了，我想我认为关键帧只是为了移动和颜色变化，而不是像创建 box-shadow onpageyoffset = 900 等。

标签： javascript css transition

【解决方案1】：

你可以给keyframes取个名字并提供你需要的时间，我在例子中提供了4sec。

它说将背景颜色从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>

【讨论】：

你是如何做到的，以便在完成后保持最终结果？
我明白了，动画：动画1s转发转发的填充节点做到了