javascript - 有没有办法在页面加载时自动启动 css 过渡或动画？

Question

我想再次将我的盒子阴影从黄色更改为黑色和黄色，然后重复该过程。我不介意有人给我一个 java 脚本答案，我只是想知道该怎么做。

Answer 1

纯 CSS 解决方案怎么样？

.box {
    height: 200px;
    width: 200px;
    background: #CCC;
    animation-duration: 2s;
    animation-name: changeShadow;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes changeShadow {
    from {
        box-shadow: 0px 4px 8px black;
    }
    to {
        box-shadow: 0px 4px 8px yellow;
    }
}

<div class="box"></div>