انیمیشن ها

انیمیشن ها در CSS باعث می شوند تا ما قادر به متحرک سازی عناصر در صفحات وب باشیم. قبل از ظهور CSS3 بیشتر متحرک سازی ها در دنیای وب بوسیله جاوا اسکریپت صورت می گرفت. از آنجایی که کنترل توالی انیمیشن هایی که بوسیله CSS ساخته می شوند زیر نظر مرورگر می باشد, ساخت انیمیشن […]

animation-play-state

با استفاده از ویژگی animation-play-state می توان یک انیمیشن را متوقف کرد و یا به حرکت در آورد. زمانی که مقدار این ویژگی برای یک انیمیشن برابر با paused شود انیمیشن در هر موقعیتی که باشد متوقف می شود و به محض اینکه مقدار این ویژگی برابر با running شود انیمیشن از همان نقطه ای […]

animation

animation یک ویژگی از نوع ویژگی های مختصر نویسی می باشد که با استفاده از آن می توان ویژگی های زیر را به صورت یکجا و مختصر در CSS تعریف کرد: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state فرض کنید مقادیر یک انیمیشن بصورت زیر برای یک عنصر تنظیم شده اند: .element { animation-name: […]

animation-fill-mode

با استفاده از ویژگی animation-fill-mode می توان برای یک انیمیشن تعریف کرد که در زمانی که اجرا نمی شود چه مقادیری را بر روی عنصر اعمال کند. به بیان واضح تر در زمان مکث قبل از اجرای انیمیشن و همینطور زمانی که انیمیشن به پایان می رسد چه مقادیری برای عنصر تنظیم شوند. بصورت پیشفرض […]

animation-direction

با استفاده از ویژگی animation-direction می توان حرکت انیمیشن را علاوه بر جهت عادی آن بصورت معکوس از آخر به اول هم تنظیم کرد و یا شروع حرکت انیمیشن را از آخر به اول داشته باشیم. نکته قابل توجه اینکه اگر انیمیشنی بوسیله این ویژگی معکوس شود مقدار ویژگی animation-timing-function آن عنصر نیز معکوس خواهد […]

animation-timing-function

از ویژگی animation-timing-function برای کنترل سرعت یک انیمیشن در گذر زمان, استفاده می شود. به بیان ساده تر عملیات انیمیشن می تواند با سرعت خیلی زیادی شروع شود و با یک سرعت آرام به اتمام برسد. برای دانستن مقادیری که این ویژگی می تواند داشته باشد timing-function را بررسی کنید. مثال: .element { animation-name: bounce; […]

animation-delay

ویژگی animation-delay اجرای یک انیمیشن را به تاخیر می اندازد. در واقع وقتی که انیمیشن به یک عنصر اعمال می شود بعد از مقدار تنظیم شده به این ویژگی اجرا می شود. مقدار پیشفرض این ویژگی 0s می باشد, به این معنی که انیمیشن بلافاصله بعد از این که به عنصر اعمال می شود, اجرا […]

animation-iteration-count

ویژگی animation-iteration-count تعیین می کند که یک انیمیشن چند بار برای عنصر انتخاب شده اجرا شود. مقدار پیشفرض این ویژگی 1 می باشد, به این معنی که انیمیشن یک بار از اول تا آخر اجرا می شود و تکرار وجود نخواهد داشت. همینطور می تواند مقدار infinite داشته باشد, یعنی انیمیشن تا بی نهایت تکرار […]

animation-duration

ویژگی animation-duration مدت زمان اجرای یک چرخه انیمیشن را تعیین می کند. زمان می تواند در دو واحد ثانیه و میلی ثانیه تعیین گردد. و بصورت پیشفرض مقدار این ویژگی 0s می باشد. می توان زمان یک انیمیشن را بصورت زیر تعیین کرد: .element { animation-duration: 2s; } و یا برای چند انیمیشن: .element { […]

animation-name

از ویژگی animation-name برای اختصاص دادن یک و یا چند انیمشین به عنصر انتخاب شده استفاده می شود. که آن انیمیشن ها بوسیله دستور keyframes@ ساخته شده اند. می توان به یک عنصر در صفحه بصورت زیر یک انیمیشن اختصاص داد: .element { animation-name: bounce; } و یا چندین انیمیشن: .element { animation-name: bounce, shake, […]