دوست من سلام امیدوارم که حالتون عالی و پر از انرژی باشید علیایی هستم، در خدمت شما هستم با یکی دیگر از آموزش های رایگان تحت عنوان آموزش آموزش transition در CSS که قصد داریم تمامی مواردشو با زبان ساده یاد بگیریم.

کار با ویژگی Transition در CSS 3

ویژگی transition یکی از کاربردی ترین سینتکس های CSS است که برای انتقال یا به زبان خودمون ترنزیشن، استفاده میشود. میتوانیم توسط این ویژگی شاهد حرکات نرم تری باشیم که جذابیت خاصی به صفحات ما خواهد داد.

اگر میخواهیم این ویژگی را بیشتر توضیح بدهیم. کار ترنزیشن این است که مثلا وقتی نشانگر موس روی یک آیتم قرار میگیرد در مدت زمان مشخصی، رنگ، اندازه و هر چیز دیگری که به آن اختصاص داده شده است تغییر کند. تمامی این موارد به آرامی و با آرامش انجام میشود که باعث جذابیت هر چه تمام تر سایتمان میشود.

در ادامه ویژگی های زیر آشنا خواهیم شد :

• Transition-Delay : تاخیر در اجرای انتقال
• Transition-Duration : مدت زمان اجرای انتقال
• Transition-Property : اون ویژگی که باید تحت تاثیر انتقال قرار بگیره
• Transition-Timing-Function : یک تابع برای اجرای عمل انتقال

کار با ویژگی Transition-Delay

با استفاده از این ویژگی میتوانیم مدت زمان خاصی را برای تاخیر در اجرای عمل انتقال مشخص کنیم، یعنی مثلا انجام این عمل ۲ ثانیه طول بکشد تا که عمل انتقال شروع شود.

مقداری که این ویژگی میپذیرد از نوع تایم یا Time می باشد، یعنی یک عدد بهمراه پسوند “s” به معنای ثانیه و ms به معنای میلی ثانیه. به عنوان اگر بخواهیم مثل به سیستم بفهمانیم که باید ۵ ثانیه برای این عمل وقت صرف کند باید به شکل روبه رو وارد کنیم => ۵s. به مثال های زیر دقت کنید.

مثال:

.MyBox{
 transition-delay: 1s;
}

نکته:

• 1s : یعنی 1 ثانیه
• 1ms : یعنی 1 میلی ثانیه

کار با ویژگی Transition-Duration

با استفاده از این ویژگی ترنزیشن میتوانیم مشخص کنیم که چقدر طول بکشد تا انتقال انجام شود. برای این مورد هم باید از واحد زمان ( ثانیه یا میلی ثانیه ) استفاده کنیم.

.MyBox{
 transition-duration: 3s;
}

کار با ویژگی Transition-Property

با استفاده از این ویژگی، ایم مورد را مشخص می کنیم که کدام ویژگی تحت تاثیر عمل انتقال قرار بگیرد. به عنوان مثل موقعی که هاور روی این آیتم، ویژگی width آن تحت تاثیر عمل قرار بگیرد.

مثال اول : فقط ویژگی width تحت تاثیر عمل انتقال قرار میگیرد.

.MyBox{
 transition-property: width;
}

مثال دوم : موقع هاور علاوه بر ویژگی width ، ویژگی heigth هم تحت تاثیر قرار گیرد.

.MyBox{
 transition-property: width,height;
}

ویژگی Transition-Timing-Function در transition 

با استفاده از این ویژگی transition میتوانیم نحوه ی انتقال را با استفاده از یک سری توابع مشخص نماییم. بطور میتوان گفت که با استفاده از این ویژگی میتوانیم سرعت عمل انتقال را تغییر دهیم.

این ویژگی مقادیر زیر را میتواند بپذیرد :

• linear : عمل انتقال را بصورت خطی و پیوسته اجرا میکند
• ease-in : شروعش کمی با تاخیر می باشد
• ease-out : پایانش کمی با تاخیر می باشد
• ease-in-out : شروع و پایانش کمی با تاخیر می باشد
• steps(int,start|end) :  تکه تکه کردن انتقال از شروع یا پایان
• cubic-bezier(0-1,0-1,0-1,0-1) : استفاده از مکعب بِزیر یک مقدار از ۰ تا ۱

مثلا: استفاده از تمامی حالت های بالا

.MyBox1{
 transition-timing-function:linear;
}

خلاصه نویسی ویژگی Transition

شکل کلی برای خلاصه نویسی این ویژگی بصورت زیر می باشد :

transition: Property|Duration|Timing-Function|Delay ;

مثال اول : استفاده از تمامی حالت ها

.MyBox{
transition: width 1s ease-in 0.5s;
}

مثال دوم : مشخص کردن فقط Duration

transition:0.8s;

مثال های بیشتر

استفاده همزمان از چندین حالت انتقال

.MyBox{
 transition: width 2s , height 1s , background-color 3s;
}

• ویژگی width یعنی ۲ ثانیه طول میکشه تا اجرا بشه
• ویژگی height یعنی ۱ ثانیه طول میکشه تا اجرا بشه
• ویژگی background-color یعنی ۳ ثانیه طول میکشه تا اجرا بشه