اجرا ❯
بازگشت
به
آموزشگاه
×
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-reverse; 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-reverse استفاده شده است تا انیمیشن در ابتدا رو به عقب پخش شود، سپس رو به جلو پخش شود:</p> <div></div> </body> </html>
