اجرا ❯
بازگشت
به
آموزشگاه
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html dir="rtl"> <head> <style> div { width: 100px; height: 100px; background-color: red; position: relative; animation-name: example; animation-duration: 4s; animation-iteration-count: 2; animation-direction: alternate; float:left; } @keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;} } </style> </head> <body> <h1>استفاده از انیمیشن در CSS</h1> <p>ویژگی animation-direction مشخص می کند که آیا یک انیمیشن باید به سمت جلو یا به سمت عقب پخش شود یا اینکه در چرخه های جایگزین(alternate cycles) پخش شود. در مثال زیر، از مقدار alternate استفاده شده است تا انیمیشن در ابتدا رو به جلو پخش شود، سپس رو به عقب پخش شود:</p> <div></div> </body> </html>
