محرر ويب أونلاين

<!DOCTYPE html>
<html>
    <head>
        <style>
@keyframes example {
    0% {
        background-color: red;
        left: 0;
        transform: rotateZ(0deg);
    }
    50% {
        background-color: blue;
        left: calc(100% - 100px);
        transform: rotateZ(360deg);
    }
    100% {
        background-color: red;
        left: 0;
        transform: rotateZ(0deg);
    }
}

div {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: -2s;
}
        </style>
    </head>
    <body>
        <h1>CSS animation-delay Property</h1>
        <p>This property is used to add a delay for the start of an animation.<p>
		<p>Using a negative time, means that we want to skip the animation and start after that time.</p>
		<p>In this example, the animation effect will skip the first 2 seconds.</p>
        <div></div>
    </body>
</html>