Transitionها
محتویات
- ۱ Transitionها (گذارها) در CSS
- ۲ پشتیبانی مرورگرها از transitionها
- ۳ چطور از Transitionsها در CSS استفاده کنیم؟
- ۴ تغییر چند مقدار ویژگی
- ۵ مشخص کردن منحنی سرعت transition
- ۶ ایجاد تأخیر در حالت Transition
- ۷ Transition + Transformation
- ۸ مثال های بیشتری از Transition
- ۹ خود را با تمرین ها امتحان کنید!
- ۱۰ ویژگی Transition در CSS
- ۱۱ منابع آموزشی
Transitionها (گذارها) در CSS
Transitionها در CSS به شما اجازه میدهند که مقدار ویژگیها را به آرامی، طی یک بازه زمانی تعیین شده تغییر دهید.[۱]
نشانهگر ماوس را روی عنصر زیر ببرید تا یک حالت transition در CSS را ببینید:
در این فصل درمورد ویژگیهای زیر مطالبی را خواهید آموخت:
transition
transition-delay
transition-duration
transition-property
transition-timing-function
پشتیبانی مرورگرها از transitionها
اعداد درون جدول مشخص کننده اولین نسخه مرورگرهایی است که بطور کامل از این ویژگی پشتیبانی می کنند.
ویژگی | ![]() |
![]() |
![]() |
![]() |
![]() |
transition | ۲۶٫۰ | ۱۰٫۰ | ۱۶٫۰ | ۶٫۱ | ۱۲٫۱ |
transition-delay | ۲۶٫۰ | ۱۰٫۰ | ۱۶٫۰ | ۶٫۱ | ۱۲٫۱ |
transition-duration | ۲۶٫۰ | ۱۰٫۰ | ۱۶٫۰ | ۶٫۱ | ۱۲٫۱ |
transition-property | ۲۶٫۰ | ۱۰٫۰ | ۱۶٫۰ | ۶٫۱ | ۱۲٫۱ |
transition-timing-function | ۲۶٫۰ | ۱۰٫۰ | ۱۶٫۰ | ۶٫۱ | ۱۲٫۱ |
چطور از Transitionsها در CSS استفاده کنیم؟
برای ساخت یک حالت transition، باید دو چیز را مشخص کنید:
- ویژگی CSS ای که میخواهید به آن یک جلوه (Effect) اضافه کنید
- مدت زمان جلوه
نکته: اگر قسمت مربوط به مدت زمان مشخص نشود، tranisiton هیچ حالتی نخواهد داشت، زیرا مقدار پیش فرض برابر با ۰ است.
مثال زیر یک عنصر <div> قرمز رنگ در اندازهٔ 100px * 100px را نشان میدهد. عنصر <div> همچنین یک حالت transition برای ویژگی عرض (به انگلیسی: width) با مدت زمان دو ثانیه نیز دارد:
حالت transition زمانی آغاز میشود که مقدار ویژگی CSS مشخص شده (عرض) تغییر کند.
حالا، می خواهیم زمانی که کاربر نشانهگر موس را روی عنصر <div> قرار میدهد، مقدار جدیدی برای ویژگی width مشخص کنیم:
توجه داشته باشید که زمانی که نشانهگر ماوس خارج از عنصر باشد، عنصر به تدریج به اندازه پیشفرض خود بازمیگردد.
تغییر چند مقدار ویژگی
مثال زیر یک حالت transition برای هر دو ویژگی width (به فارسی: عرض) و height (به فارسی: ارتفاع)، به مدت ۲ ثانیه برای ویژگی width و ۴ ثانیه برای ویژگی heigth اضافه میکند:
مشخص کردن منحنی سرعت transition
ویژگی transition-timing-function
منحنی سرعت transition را مشخص میکند.
ویژگی transition-timing-function میتواند مقادیر زیر را داشته باشد:
ease
- یک حالت transition، با شروع آرام، سپس سریع و سپس پایان آرام را مشخص می کند (حالت پیشفرض)
linear
- یک حالت transition با سرعت یکسان از ابتدا تا انتها را مشخص میکند
ease-in
- یک حالت transition با آغاز آرام را مشخص میکند
ease-out
- یک حالت transition با پایان آرام را مشخص میکند
ease-in-out
- یک حالت transition با آغاز و پایان آرام را مشخص میکند
cubic-bezier(n,n,n,n)
- به شما اجازه میدهد مقادیر خود را درون تابع cubic-bazier تعریف کنید
مثال زیر تفاوت برخی از منحنیهای سرعت را که میتوان از آنها استفاده کرد نشان میدهد:
ایجاد تأخیر در حالت Transition
ویژگی transition-delay
مشخص کننده یک تأخیر (به ثانیه) برای حالت transition است.
مثال زیر یک تأخیر یک ثانیه ای را قبل از آغاز دارد:
Transition + Transformation
مثال زیر یک حالت transition را به transformation اضافه میکند:
مثال های بیشتری از Transition
ویژگیهای transition در CSS میتوانند یکی یکی، همانند زیر مشخص شوند:
و یا با استفاده از ویژگی مختصر transition
:
خود را با تمرین ها امتحان کنید!
ویژگی Transition در CSS
جدول زیر تمام ویژگیهای Transition در CSS را لیست میکند:
ویژگی | توضیحات |
---|---|
transition | یک ویژگی مختصر برای تنظیم چهار ویژگی Transition درون یک ویژگی |
transition-delay | تأخیر (به ثانیه) برای حالت Transition را مشخص می کند |
transition-duration | مشخص میکند چند ثانیه یا میلی ثانیه طول میکشد تا حالت Transition کامل شود |
transition-property | مشخص کننده نام ویژگی CSS ای است که حالت Transition به آن تعلق دارد |
transition-timing-function | مشخص کننده منحنی سرعت حالت Transition است |
منابع آموزشی