animation-duration

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

animation-name

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

keyframes@

از دستور keyframes@ برای تعریف رفتار یک چرخه انیمیشن در CSS استفاده می شود. انیمیشن ها هم مثل transition ها ویژگی های نمایشی عناصر را در طول زمان تغییر می دهند. تفاوت اصلی در این است که ترنزیشن ها به طور خودکار در زمان تغییر یک ویژگی (مثلا در زمان رویداد hover) عمل می کنند […]

alt-img-tag

استایل دهی به متن جایگزین تصویر

همانطور که می دانید نوشته جایگزین یک تصویر در صفحات وب بوسیله خاصیت alt در تگ <img> به وجود می آید. <img src=”bird.jpg” alt=”تصویر یک پرنده خیلی خشنگ” /> ما به دلایل زیر از این ویژگی استفاده می کنیم: در صورت بروز هر مشکل برای تصویر کاربر می تواند این متن را ببیند و شاید […]

نکات تکمیلی ترنزیشن ها

نکته های تکمیلی ترنزیشن در CSS

در مطالب قبل در مورد ویژگی های ترنزیشن صحبت شد, در اینجا قصد بیان نکته های تکمیلی این ویژگی را داریم. تعریف ترنزیشن در وضعیت های مختلف یک عنصر شاید تا الان به این نکته توجه نکرده باشید که برای یک عنصر می توانید در چند وضعیت متفاوت ترنزیشن های متفاوتی تعریف کنید. به عنوان […]

transition season

ترنزیشن ها

یکی از جذاب ترین ویژگی های CSS امروز دنیای وب متحرک سازی عناصر در یک صفحه می باشد. ترنزیشن ها ساده ترین راه برای این کار هستند. در صفحات وب از CSS برای تغییر استایل از مقداری به مقدار دیگر استفاده می شود که این تغییر به صورت ناگهانی و فوری اتفاق می افتد, اضافه […]

transition

transition یک ویژگی از نوع ویژگی های مختصر نویسی می باشد که با استفاده از آن می توان ویژگی های زیر را به صورت یکجا و مختصر در CSS تعریف کرد: transition-property transition-duration transition-timing-function transition-delay ترتیب نوشتن این ویژگی ها با استفاده از ویژگی transition مهم است و باید به ترتیب اشاره شده در بالا […]

transition-property

از ویژگی transition-property برای تعیین ویژگی هایی که قرار است transition بر روی آنها اعمال شود استفاده می شود. به عنوان مثال اگر بخواهیم transition فقط بر روی رنگ پس زمینه یک عنصر اعمال شود داریم: div { transition-property : background-color; } شما می توانید نام یک ویژگی و یا چند ویژگی که با استفاده […]

transition-duration

ویژگی transition-duration تعیین می کند که transition چه مدت زمانی به طول می انجامد. یعنی چه مدت طول می کشد تا مقدار ویژگی که transition بر روی آن اعمال می شود از مقدار قبلی به مقدار جدید برسد. واحد زمانی این ویژگی می تواند ثانیه و یا میلی ثانیه باشد و مقدار پیشفرض آن 0 […]

transition-timing-function

از ویژگی transition-timing-function برای تعیین سرعت تغییر ویژگی یک عنصر دارای transition در گذر زمان, استفاده می شود. این ویژگی اجازه می دهد تا فرایند تغییر یک ویژگی بتواند سرعت های مختلفی در دوره زمانیش داشته باشد. به بیان ساده تر عملیات transition می تواند با سرعت خیلی زیادی شروع شود و با یک سرعت […]