Thursday, May 9, 2024
HomeCSScss - The keyframes aren't making the block transfer

css – The keyframes aren’t making the block transfer


I fastened your code utilizing the examples on developer.mozilla.org. I hope that is the anticipated conduct.

animation-iteration-count: infinite; will make the animation repeat eternally.

animation-name defines the identifier utilized in @keyframes.

No positive why animation-duration is required. I wager you will discover it out.

#block{
    width: 20px;
    peak: 20px;
    background-color: blue;
    place: absolute;
    prime: 130px;
    left: 480px;
    animation-duration: 3s;
    animation-name: block;
    animation-iteration-count: infinite;
}

@keyframes block  {
    0% {
      left: 480px; 
    }
    
    100% {
      left: -40px;
    }
}
<div id="block"></div>
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments