اجرا ❯
بازگشت
به
آموزشگاه
×
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-direction: 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) پخش شود. در مثال زیر، انیمیشن به صورت معکوس پخش می شود(رو به عقب):</p> <div></div> </body> </html>
