CSS تبدیل
- صفحه قبلی CSS 3D تبدیلات
- صفحه بعدی CSS انیمیشن
CSS تبدیل
CSS انتقال به شما اجازه میدهد که در مدت زمان مشخص شده، به آرامی مقدار ویژگیها را تغییر دهید.
لطفاً موس خود را به این عنصر ببرید تا اثر انتقال CSS را مشاهده کنید:
در این فصل، شما به ویژگیهای زیر یاد خواهید گرفت:
transition
transition-delay
transition-duration
transition-property
transition-timing-function
پشتیبانی مرورگرها از انتقال
اعداد در جدول نشاندهنده نسخه اولین مرورگر هستند که این ویژگی را به طور کامل پشتیبانی میکند.
خصوصیات | کروم | IE | افراط | سافاری | آپرا |
---|---|---|---|---|---|
transition | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
transition-delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
transition-duration | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
transition-property | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
transition-timing-function | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
چگونه از CSS انتقال استفاده میکنیم؟
برای ایجاد اثر انتقال، باید دو چیز را به وضوح تعیین کنید:
- ویژگی CSS که میخواهید به آن اثر بدهید
- مدت زمان اثر
توجه داشته باشید که:اگر مدت زمان تعیین نشده باشد،过渡effکت مؤثر نخواهد بود زیرا مقدار پیشفرض 0 است.
در این مثال، عنصر <div> قرمز رنگ به اندازه 100px * 100px نشان داده شده است. عنصر <div> همچنین برای ویژگی عرض (width) یک اثر انتقال با مدت زمان 2 ثانیه تعیین شده است:
مثال
div { عرض: 100px; ارتفاع: 100px; background: قرمز; transition: عرض 2s; }
وقتی مقدار CSS (عرض) تغییر کند،过渡effکت شروع میشود.
حالا، بگذارید برای ویژگی عرض (width) یک مقدار جدید برای وقتی که موس بر روی عنصر <div> قرار دارد، تعیین کنیم:
مثال
div:hover { عرض: 300px; }
لطفاً توجه کنید که وقتی نویزکننده از عنصر به بالا حرکت میکند، به تدریج به سبک اولیهاش برمیگردد.
تغییر چندین مقدار خصوصیات
در مثال زیر، تأثیر گذار به روی خصوصیات width و height اضافه شده است، width 2 ثانیه و height 4 ثانیه است:
مثال
div { transition: width 2s, height 4s; }
منحنی سرعت گذار را مشخص کنید
transition-timing-function
خصوصیات تأثیر گذار را به صورت منحنی مشخص میکند.
خصوصیات transition-timing-function میتواند از مقادیر زیر پذیرفته شود:
ease
- تأثیر گذار را به صورت آهسته شروع کرده، سپس شتاب میگیرد و در انتهای آهسته مشخص میکند (پیشفرض)linear
- تأثیر گذار را با سرعت یکسان از ابتدا تا انتهای گذار مشخص میکندease-in
- تأثیر گذار را در ابتدا آهسته مشخص میکندease-out
- تأثیر گذار را در انتهای آهسته مشخص میکندease-in-out
- تأثیر گذار را آهستهتر در ابتدا و انتهای گذار مشخص میکندcubic-bezier(n,n,n,n)
- اجازه میدهد تا شما مقدار خود را در تابع کثیرگون تعریف کنید
در مثال زیر، منحنیهای سرعت مختلفی که میتوانید از آنها استفاده کنید نشان داده شده است:
مثال
تأخیر گذار
transition-delay
خصوصیات تأخیر تأثیر گذار را به صورت ثانیه مشخص میکند.
در مثال زیر، تأخیر 1 ثانیهای قبل از شروع وجود دارد:
مثال
div { transition-delay: 1s; }
گذار + تبدیل
در مثال زیر، تأثیر گذار به روی تبدیل اضافه شده است:
مثال
div { transition: width 2s, height 2s, transform 2s; }
مثالهای بیشتری از گذار
شما میتوانید خصوصیات CSS گذار را به صورت زیر مشخص کنید:
مثال
div { transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; }
یا از کوتاهتر transition
خصوصیات:
مثال
div { transition: width 2s linear 1s; }
خصوصیات CSS گذار
در جدول زیر تمام خصوصیات CSS گذار آورده شده است:
خصوصیات | وصف |
---|---|
transition | ویژگی کوتاهنویسی، که از چهار ویژگی تبدیل به یک ویژگی واحد تبدیل میکند. |
transition-delay | تأخیر تبدیل را (به ثانیه) تعیین میکند. |
transition-duration | مدت زمان یا میکروثانیهای که تبدیل باید ادامه یابد را تعیین میکند. |
transition-property | نام ویژگیهای CSS که تبدیل باید به آنها اعمال شود را تعیین میکند. |
transition-timing-function | سرعت منحنی تبدیل را تعیین میکند. |
- صفحه قبلی CSS 3D تبدیلات
- صفحه بعدی CSS انیمیشن