این آموزش در تاریخ ۱۴۰۲/۰۶/۲۸ آپدیت شده است.
آموزش کامل کار با ویژگی Transition در CSS3
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل کار با ویژگی Transition در CSS3 با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با ویژگی Transition در CSS3
ویژگی transition یا در لغت انتقال یا خودمونی تر ( ترنزیشِن ) ، یکی از ویژگی هایست که با استفاده از آن میتوان به تگ های داخل صفحه افکت انتقال ( یا به حرکت درآوردن تگ ها ) داد.
منظور از افکت انتقال ، مثلا میتونیم کاری کنیم که وقتی ماوس بروی یک تگ قرار گرفت اون تگ در مدت زمان مشخصی مثلا رنگ زمینش عوض شه یا مثلا وقتی ماوس رفت روی تگ ، اندازه اون تگ به آرامی تغییر کنه و…
در ادامه میخوام شمارو با ویژگی های زیر آشنا کنم :
- Transition-Delay : تاخیر در اجرای انتقال
- Transition-Duration : مدت زمان اجرای انتقال
- Transition-Property : اون ویژگی که باید تحت تاثیر انتقال قرار بگیره
- Transition-Timing-Function : یک تابع برای اجرای عمل انتقال
Free-Learn
کار با ویژگی Transition-Delay
با استفاده از این ویژگی میتوان یه مدت زمانی رو برای تاخیر در اجرای عمل انتقال مشخص کرد، یعنی مثلا ۲ ثانیه طول بکشه تا که عمل انتقال شروع شه.
مقداری که این ویژگی میپذیرد از نوع تایم یا Time می باشد، یعنی یک عدد بهمراه پسوند s یعنی ثانیه و ms یعنی میلی ثانیه، مثلا ۵ ثانیه رو باید اینجوری بنویسیم : ۵s
- ۱s : یعنی ۱ ثانیه
- ۱ms : یعنی ۱۰۰۰ میلی ثانیه
مثال :
|
1 2 3 |
.MyBox{ transition-delay: 1s; } |
Free-Learn
کار با ویژگی Transition-Duration
با استفاده از این ویژگی میتونیم مشخص کنیم که چند ثانیه طول بکشه تا انتقال انجام بشه، برای اینم باید از واحد زمان ( ثانیه یا میلی ثانیه ) استفاده کنیم.
- ۱s : یعنی ۱ ثانیه
- ۱ms : یعنی ۱۰۰۰ میلی ثانیه
مثال :
|
1 2 3 |
.MyBox{ transition-duration: 3s; } |
Free-Learn
کار با ویژگی Transition-Property
با استفاده از این ویژگی میتونیم مشخص کنیم که کدام ویژگی تحت تاثیر عمل انتقال قرار بگیره، مثلا بگیم وقتی ماوس رفت روی تگ، ویژگی width ش تحت تاثیر عمل انتقال قرار بگیره.
مثال شماره ۱ : فقط ویژگی width تحت تاثیر عمل انتقال قرار میگیرد
|
1 2 3 |
.MyBox{ transition-property: width; } |
مثال شماره ۲ : ویژگی های width و heigth تحت تاثیر عمل انتقال قرار میگیرند
|
1 2 3 |
.MyBox{ transition-property: width,height; } |
Free-Learn
کار با ویژگی Transition-Timing-Function
با استفاده از این ویژگی میتوان نحوه ( روش ) انتقال را با استفاده از یسری توابع مشخص کرد، یا بطور کلی با استفاده از این ویژگی میتوان سرعت عمل انتقال را تغییر داد.
این ویژگی مقادیر زیر را میتواند بپذیرد :
- linear : عمل انتقال را بصورت خطی و پیوسته اجرا میکند
- ease-in : شروعش کمی با تاخیر می باشد
- ease-out : پایانش کمی با تاخیر می باشد
- ease-in-out : شروع و پایانش کمی با تاخیر می باشد
- steps(int,start|end) : تکه تکه کردن انتقال از شروع یا پایان
- cubic-bezier(0-1,0-1,0-1,0-1) : استفاده از مکعب بِزیر یک مقدار از ۰ تا ۱
مثال : استفاده از تمامی حالت های بالا
|
1 2 3 |
.MyBox1{ transition-timing-function:linear; } |
Free-Learn
خلاصه نویسی ویژگی Transition
شکل کلی برای خلاصه نویسی این ویژگی بصورت زیر می باشد :
|
1 |
transition: Property|Duration|Timing-Function|Delay ; |
- Property : اون ویژگی که قراره تحت تاثیر قرار بگیره
- Duration : مدت زمانی که باید طول بکشه تا انتقال انجام بشه
- Timing-Function : نحوه / روش انتقال
- Delay : تاخیر در شروع انتقال
مثال شماره ۱ : استفاده از تمامی حالت ها
|
1 2 3 |
.MyBox{ transition: width 1s ease-in 0.5s; } |
مثال شماره ۲ : مشخص کردن فقط Duration
|
1 |
transition:0.8s; |
Free-Learn
مثال های بیشتر
مثال شماره ۱ : استفاده همزمان از چندین حالت انتقال
- ویژگی width یعنی ۲ ثانیه طول میکشه تا اجرا بشه
- ویژگی height یعنی ۱ ثانیه طول میکشه تا اجرا بشه
- ویژگی background-color یعنی ۳ ثانیه طول میکشه تا اجرا بشه
|
1 2 3 |
.MyBox{ transition: width 2s , height 1s , background-color 3s; } |
مثال شماره ۲ : وقتی روی تگ Input کلیک میشه اندازه عرضش %۱۰۰ میشه
|
1 2 3 4 5 6 |
input[type="text"]{ width: 150px; transition:0.8s; border:2px solid #000; padding:6px; } |
