با استفاده از ویژگی animation-fill-mode می توان برای یک انیمیشن تعریف کرد که در زمانی که اجرا نمی شود چه مقادیری را بر روی عنصر اعمال کند. به بیان واضح تر در زمان مکث قبل از اجرای انیمیشن و همینطور زمانی که انیمیشن به پایان می رسد چه مقادیری برای عنصر تنظیم شوند. بصورت پیشفرض […]
با استفاده از ویژگی animation-direction می توان حرکت انیمیشن را علاوه بر جهت عادی آن بصورت معکوس از آخر به اول هم تنظیم کرد و یا شروع حرکت انیمیشن را از آخر به اول داشته باشیم. نکته قابل توجه اینکه اگر انیمیشنی بوسیله این ویژگی معکوس شود مقدار ویژگی animation-timing-function آن عنصر نیز معکوس خواهد […]
از ویژگی animation-timing-function برای کنترل سرعت یک انیمیشن در گذر زمان, استفاده می شود. به بیان ساده تر عملیات انیمیشن می تواند با سرعت خیلی زیادی شروع شود و با یک سرعت آرام به اتمام برسد. برای دانستن مقادیری که این ویژگی می تواند داشته باشد timing-function را بررسی کنید. مثال: .element { animation-name: bounce; […]
ویژگی animation-delay اجرای یک انیمیشن را به تاخیر می اندازد. در واقع وقتی که انیمیشن به یک عنصر اعمال می شود بعد از مقدار تنظیم شده به این ویژگی اجرا می شود. مقدار پیشفرض این ویژگی 0s می باشد, به این معنی که انیمیشن بلافاصله بعد از این که به عنصر اعمال می شود, اجرا […]
ویژگی animation-iteration-count تعیین می کند که یک انیمیشن چند بار برای عنصر انتخاب شده اجرا شود. مقدار پیشفرض این ویژگی 1 می باشد, به این معنی که انیمیشن یک بار از اول تا آخر اجرا می شود و تکرار وجود نخواهد داشت. همینطور می تواند مقدار infinite داشته باشد, یعنی انیمیشن تا بی نهایت تکرار […]
ویژگی animation-duration مدت زمان اجرای یک چرخه انیمیشن را تعیین می کند. زمان می تواند در دو واحد ثانیه و میلی ثانیه تعیین گردد. و بصورت پیشفرض مقدار این ویژگی 0s می باشد. می توان زمان یک انیمیشن را بصورت زیر تعیین کرد: .element { animation-duration: 2s; } و یا برای چند انیمیشن: .element { […]
از ویژگی animation-name برای اختصاص دادن یک و یا چند انیمشین به عنصر انتخاب شده استفاده می شود. که آن انیمیشن ها بوسیله دستور keyframes@ ساخته شده اند. می توان به یک عنصر در صفحه بصورت زیر یک انیمیشن اختصاص داد: .element { animation-name: bounce; } و یا چندین انیمیشن: .element { animation-name: bounce, shake, […]
از دستور keyframes@ برای تعریف رفتار یک چرخه انیمیشن در CSS استفاده می شود. انیمیشن ها هم مثل transition ها ویژگی های نمایشی عناصر را در طول زمان تغییر می دهند. تفاوت اصلی در این است که ترنزیشن ها به طور خودکار در زمان تغییر یک ویژگی (مثلا در زمان رویداد hover) عمل می کنند […]
همانطور که می دانید نوشته جایگزین یک تصویر در صفحات وب بوسیله خاصیت alt در تگ <img> به وجود می آید. <img src=”bird.jpg” alt=”تصویر یک پرنده خیلی خشنگ” /> ما به دلایل زیر از این ویژگی استفاده می کنیم: در صورت بروز هر مشکل برای تصویر کاربر می تواند این متن را ببیند و شاید […]
در مطالب قبل در مورد ویژگی های ترنزیشن صحبت شد, در اینجا قصد بیان نکته های تکمیلی این ویژگی را داریم. تعریف ترنزیشن در وضعیت های مختلف یک عنصر شاید تا الان به این نکته توجه نکرده باشید که برای یک عنصر می توانید در چند وضعیت متفاوت ترنزیشن های متفاوتی تعریف کنید. به عنوان […]
