有没有一种方法可以在页面加载时自动启动css过渡或动画

Is there a way to automatically start css transitions or animations on page load?

本文关键字：自动启动 加载 css 动画 一种 方法 有没有      更新时间：2023-09-26

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

纯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>

相关文章：