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

Question

I want to change my box shadow from yellow to black and yellow again and just repeat that process. I don't mind if someone gives me a java script answer I just wanna know how to do it.

Answer 1

How about a pure CSS solution?

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