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