آموزش انتقال CSS

13 جولای 2021

انتقال CSS

انتقال های CSS به شما امکان می دهد مقادیر ویژگی را به طور هموار و در مدت زمان مشخص تغییر دهید.

برای دیدن جلوه انتقال CSS روی عنصر زیر قرار دهید:

CSS

در این فصل شما با خواص زیر آشنا خواهید شد:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

پشتیبانی مرورگر برای انتقال

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل از ویژگی پشتیبانی می کند.


چگونه از CSS Transitions استفاده کنیم؟

برای ایجاد یک اثر گذار ، باید دو مورد را مشخص کنید:

  • ویژگی CSS که می خواهید به آن افکت اضافه کنید
  • مدت زمان اثر

توجه: اگر قسمت مدت زمان مشخص نباشد ، انتقال هیچ تاثیری نخواهد داشت ، زیرا مقدار پیش فرض 0 است.

مثال زیر یک عنصر 100px * 100px قرمز <div> را نشان می دهد. عنصر <div> همچنین برای مدت زمان 2 ثانیه یک اثر انتقال برای ویژگی عرض تعیین کرده است:

مثال

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

اثر تغییر هنگامی شروع می شود که ویژگی CSS (عرض) مشخص شده مقدار را تغییر دهد.

اکنون ، هنگامی که کاربر عنصر <div> را از بین می برد ، اجازه دهید یک مقدار جدید برای ویژگی عرض تعیین کنیم:

مثال

div:hover {
  width: 300px;
}

منحنی سرعت انتقال را مشخص کنید

transition-timing-functionاموال منحنی سرعت اثر گذار مشخص می کند.

ویژگی عملکرد-زمان بندی-انتقال می تواند مقادیر زیر را داشته باشد:

  • ease – یک اثر گذار را با شروع آهسته ، سپس سریع ، سپس به آرامی پایان دهید (این پیش فرض است)
  • linear – یک اثر انتقال را با همان سرعت از ابتدا تا انتها مشخص می کند
  • ease-in – یک اثر گذار را با شروع آهسته مشخص می کند
  • ease-out – یک اثر گذار با پایان آهسته را مشخص می کند
  • ease-in-out – یک اثر گذار را با شروع و پایان آهسته مشخص می کند
  • cubic-bezier(n,n,n,n) – به شما اجازه می دهد مقادیر خود را در یک تابع مکعب-bezier تعریف کنید

مثال زیر برخی از منحنی های سرعت مختلف را می توان استفاده کرد:

مثال

#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اموال تاخیر (در ثانیه) برای اثر گذار مشخص می کند.

مثال زیر قبل از شروع 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;
}

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.