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

Question

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

Answer 1

纯CSS解决方案怎么样？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;