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

​x
 
<!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-iteration-count: infinite;
}
        </style>
    </head>
    <body>
        <h1>CSS animation-iteration-count property</h1>
        <p>This property specifies the number of times an animation should run.</p>
        <p>The "infinite" value lets the animation run for ever.</p>
        <div></div>
    </body>
</html>