یکی از جذاب ترین ویژگی های CSS امروز دنیای وب متحرک سازی عناصر در یک صفحه می باشد. ترنزیشن ها ساده ترین راه برای این کار هستند. در صفحات وب از CSS برای تغییر استایل از مقداری به مقدار دیگر استفاده می شود که این تغییر به صورت ناگهانی و فوری اتفاق می افتد, اضافه کردن ویژگی های ترنزیشن باعث می شود تا بیشتر آن تغییرات بصورت تدریجی در طول زمان اتفاق بیفتند و این امر باعث داشتن یک واسط کاربری جاندارتر و شادابتری می شود و تجربه کاربری موثرتری را به ارمغان خواهد آورد.
همچنین کارایی ترنزیشن ها در دنیای صفحات کوچک موبایل ها بسیار بالاست چرا که تغییرات ناگهانی در صفحه های کوچک چنین دستگاهایی باعث گمراهی کاربر می شود. این نوع متحرک سازی ها در CSS نیاز به تایمرهای سنتی جاوااسکریپتی ندارند و بسیار سریع تر از آن ها عمل می کنند.
این فصل آموزشی ویژگی های مختلف ترنزیشن را معرفی می کند و نحوه کنترل یک ترنزیشن را نشان می دهد. همچنین نحوه ساخت چندین ترنزیشن پشت سر هم را نیز معرفی می کند.
ساخت متحرک سازی های پیچیده تر در CSS به وسیله انیمیشن ها انجام می شود که برای یادگیری این امر در مرحله اول باید با ترنزیشن ها به صورت کامل آشنا شده و بتوانیم به راحتی از آنها استفاده کنیم.
برای تعیین این موضوع که کدام ویژگی یک عنصر (یا تمام ویژگی های آن) تغییراتش با ترنزیشن همراه باشد از ویژگی transition-property استفاده می شود:
transition-duration مشخص می کند چه مدت زمانی یک ترنزیشن به طول بیانجامد:
برای به وجود آوردن یک مکث قبل از انجام ترنزیشن از ویژگی transition-delay استفاده کنیم:
transition-timing-function به ما اجازه می دهد تا سرعت ترنزیشن را در طول اجرای آن کنترل کنیم:
و برای آشنایی با توابع کنترل سرعت با نوع داده ای <timing-function> آشنا خواهیم شد:
<timing-function>و در نهایت می توانیم تمام ویژگی های ترنزیشن را به صورت خلاصه و کوتاه شده با استفاده از ویژگی transition در یک خط بنویسیم:
بعد از فراگیری تمام ویژگی های ترنزیشن, این مطلب نکات تکمیلی موضوع را بیان خواهد کرد:
نکات تکمیلی
عالیه
ممنونم
خیلی عالی بود ممنون
ببخشید برای استایل نوشته ها از چی استفاده می کنید ؟
مثلا تو آموزش ساب لایم گفته بودین پیش نیاز : ساب لایم
این یه تیکه تو کادر جدا بود مثلا کدها ی بالا
؟
مرسی بعد از گذشت یکسال و نیم که با این وب سایت آشنا شدم هنوز هم در وب ایران جایی ندیدم که مثل اینجا کامل و واضح باشه
مجدد تشکر می کنم :)
سلام.امیدوارم حالتون خوب باشه.
من این کد رو داشتم امتحان میکردم دوتا سوال برام پیش اومد.
اول اینکه چرا وقتی دایره در راستای محمر z بزرگ میشه بعدش سریع به حالت اول برمیگرده(بدون اینکه از حالت hover خارج شده باشه)
و دوم اینکه فقط در صورتیکه مقدار all رو به عنوان ویژگیهایی که درگیر ترنزیشن میشن رو وارد کردم هم رنگ و هم مکان تغییر کرد وقتی میخوام اسم مقادیر یعنی(background-color و transform) رو بدم فقط یکیشون کار میکنه
ببخشید خیلی طولانی شد
https://codepen.io/Rookie-man/pen/wvoMYzE
سلام، برای transform هم مثل background باید زمان مشخص کنید.