انتقال‌ها در CSS به شما این امکان را می‌دهند که تغییرات در مقادیر ویژگی‌ها به صورت نرم و روان و در یک بازه زمانی مشخص رخ دهند.
خواص اصلی CSS برای انتقال‌ها
در این بخش با خواص زیر آشنا می‌شوید:
transition– برای تعریف انتقالاتtransition-delay– برای تعیین تأخیر قبل از شروع انتقالtransition-duration– برای تعیین مدت زمان انتقالtransition-property– برای مشخص کردن ویژگی‌هایی که شامل انتقال خواهند شدtransition-timing-function– برای تعیین منحنی سرعت انتقال
چگونه از CSS Transitions استفاده کنیم؟
برای ایجاد یک افکت انتقال باید دو مورد را مشخص کنید:
- ویژگی CSS که می‌خواهید انتقال روی آن انجام شود.
- مدت زمان افکت انتقال.
مثال
عنصر <div> با ابعاد 100px در 100px و رنگ قرمز که برای ویژگی width افکت انتقال با مدت زمان 2 ثانیه تعریف شده است:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}وقتی ویژگی width تغییر کند، افکت انتقال آغاز می‌شود. حالا با استفاده از :hover می‌توانیم مقدار جدیدی برای width تعریف کنیم:
div:hover {
width: 300px;
}وقتی نشانگر موس از روی عنصر خارج شود، اندازه به حالت اولیه به صورت نرم بازمی‌گردد.
تغییر چند ویژگی با هم
در این مثال، انتقال برای هر دو ویژگی width و height مشخص شده است، با این تفاوت که مدت زمان تغییر عرض 2 ثانیه و ارتفاع 4 ثانیه است:
div {
transition: width 2s, height 4s;
}تعیین منحنی سرعت انتقال
ویژگی transition-timing-function منحنی سرعت انتقال را مشخص می‌کند. این ویژگی می‌تواند مقادیر زیر را داشته باشد:
ease– شروع آهسته، وسط سریع و پایان آهسته (پیش‌فرض)linear– سرعت ثابت از ابتدا تا انتهاease-in– شروع آهستهease-out– پایان آهستهease-in-out– شروع و پایان آهستهcubic-bezier(n,n,n,n)– امکان تعریف مقادیر سفارشی در تابع بزیه
مثال:
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}تأخیر در شروع انتقال
ویژگی transition-delay زمان تأخیر قبل از شروع انتقال را مشخص می‌کند.
مثال:
div {
transition-delay: 1s;
}ترکیب انتقال و تبدیل
در این مثال، انتقال برای ویژگی‌های width، height و transform به مدت 2 ثانیه تعریف شده است:
div {
transition: width 2s, height 2s, transform 2s;
}خلاصه‌نویسی ویژگی‌های انتقال
می‌توانید هر یک از خواص انتقال را به صورت جداگانه مشخص کنید:
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}یا از خاصیت مختصر transition استفاده کنید:
div {
transition: width 2s linear 1s;
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام