جستجو برای:
سبد خرید 0
  • خانه
  • شبکه و امنیت
    • تکنسین شبکه
      • پسیو شبکه و طراحی Data Center
      • CompTIA
      • Help Desk
      • فیبر نوری
      • دوربین های مداربسته
      • سیستم های امنیتی
      • IOT & BMS
    • مایکروسافت
      • ویندوز سرور (MCSA , MCSE)
      • شیرپوینت
      • SQL Server
      • System Center
      • سرویس های تخصصی
    • سیسکو
      • CCNA
      • CCNP Enterprise
      • CCNP Security
      • CCNP Collaboration
      • CCNP Data Center
      • CCNP Service Provider
      • CyberOps Professional
      • DevNet Professional
      • CCIE
    • مجازی سازی ، Cloud و Storage
      • VMware
      • HPE
      • EMC
      • بکاپ و مانیتورینگ شبکه
      • AWS
    • لینوکس
      • دوره های پایه و LPIC
      • سرویس های تخصصی لینوکس
      • سرویس های امنیتی لینوکس
      • بکاپ و مانیتورینگ
      • Embedded
      • هاستینگ
    • امنیت
      • fortinet
      • Splunk
      • GIAC Certified
      • Security Operations Center (SOC)
    • میکروتیک و وایرلس
    • جونیپر
    • تلفن های سانترال و VOIP
    • دواپس
  • برنامه نویسی و طراحی سایت
    • افزونه وردپرس
      • سئو و بهینه سازی
      • فروشگاهی (ووکامرس)
      • بکاپ و امنیت
      • صفحه ساز
      • آموزشی
      • افزونه های کاربردی
      • پشتیبانی و چت
      • ابزار های مدیریتی
      • تبلیغات و بازاریابی
      • فرم ساز
      • افزونه های گالری
      • افزونه های شبکه اجتماعی
      • افزونه های رزرو آنلاین و نوبت دهی
    • خدمات طراحی سایت
    • سئو و دیجیتال مارکتینگ
    • آموزش وردپرس
    • سرویس های Open Source
      • Vtiger CRM
      • ERP Odoo
      • کلاس آنلاین و ویدئو کنفرانس
    • پایتون (هوش مصنوعی و…)
    • Secure Coding
  • برق و الکترونیک
    • تعمیرات قطعات کامپیوتر و لب تاپ
    • تعمیرات هارد و ریکاوری اطلاعات
    • تعمیرات پرینتر و لوازم اداری
    • تعمیرات تجهیزات شبکه
  • مدیریت
    • مدیریت فناوری اطلاعات
      • ISO/IEC 27001
      • ISC2 & ISACA Certification
      • ITIL
      • انستیتو دواپس
      • COBIT
      • PMBOK
      • SCRUM
    • مدیریت مالی و سرمایه‌گذاری
    • استارتاپ
    • مدیریت اجرایی MBA
    • روانشناسی
      • روانشناسی بازار های مالی
      • انگیزشی
  • وبینار و کلاس آنلاین
    • سامانه LMS (مودل فارسی)
    • بیگ بلو باتن
    • سرویس ویدئو کنفرانس
 
خدمات شبکه فراز نتورک
ورود
[suncode_otp_login_form]
گذرواژه خود را فراموش کرده اید؟
عضویت
[suncode_otp_registration_form]
  • 021-66416682
  • Info[@]faraznetwork.ir
خدمات شبکه فراز نتورک
  • خانه
  • شبکه و امنیت
    • تکنسین شبکه
      • پسیو شبکه و طراحی Data Center
      • CompTIA
      • Help Desk
      • فیبر نوری
      • دوربین های مداربسته
      • سیستم های امنیتی
      • IOT & BMS
    • مایکروسافت
      • ویندوز سرور (MCSA , MCSE)
      • شیرپوینت
      • SQL Server
      • System Center
      • سرویس های تخصصی
    • سیسکو
      • CCNA
      • CCNP Enterprise
      • CCNP Security
      • CCNP Collaboration
      • CCNP Data Center
      • CCNP Service Provider
      • CyberOps Professional
      • DevNet Professional
      • CCIE
    • مجازی سازی ، Cloud و Storage
      • VMware
      • HPE
      • EMC
      • بکاپ و مانیتورینگ شبکه
      • AWS
    • لینوکس
      • دوره های پایه و LPIC
      • سرویس های تخصصی لینوکس
      • سرویس های امنیتی لینوکس
      • بکاپ و مانیتورینگ
      • Embedded
      • هاستینگ
    • امنیت
      • fortinet
      • Splunk
      • GIAC Certified
      • Security Operations Center (SOC)
    • میکروتیک و وایرلس
    • جونیپر
    • تلفن های سانترال و VOIP
    • دواپس
  • برنامه نویسی و طراحی سایت
    • افزونه وردپرس
      • سئو و بهینه سازی
      • فروشگاهی (ووکامرس)
      • بکاپ و امنیت
      • صفحه ساز
      • آموزشی
      • افزونه های کاربردی
      • پشتیبانی و چت
      • ابزار های مدیریتی
      • تبلیغات و بازاریابی
      • فرم ساز
      • افزونه های گالری
      • افزونه های شبکه اجتماعی
      • افزونه های رزرو آنلاین و نوبت دهی
    • خدمات طراحی سایت
    • سئو و دیجیتال مارکتینگ
    • آموزش وردپرس
    • سرویس های Open Source
      • Vtiger CRM
      • ERP Odoo
      • کلاس آنلاین و ویدئو کنفرانس
    • پایتون (هوش مصنوعی و…)
    • Secure Coding
  • برق و الکترونیک
    • تعمیرات قطعات کامپیوتر و لب تاپ
    • تعمیرات هارد و ریکاوری اطلاعات
    • تعمیرات پرینتر و لوازم اداری
    • تعمیرات تجهیزات شبکه
  • مدیریت
    • مدیریت فناوری اطلاعات
      • ISO/IEC 27001
      • ISC2 & ISACA Certification
      • ITIL
      • انستیتو دواپس
      • COBIT
      • PMBOK
      • SCRUM
    • مدیریت مالی و سرمایه‌گذاری
    • استارتاپ
    • مدیریت اجرایی MBA
    • روانشناسی
      • روانشناسی بازار های مالی
      • انگیزشی
  • وبینار و کلاس آنلاین
    • سامانه LMS (مودل فارسی)
    • بیگ بلو باتن
    • سرویس ویدئو کنفرانس
اینجا شروع کنید
آخرین اطلاعیه ها
لطفا برای نمایش اطلاعیه ها وارد شوید
0

وبلاگ

خدمات شبکه فراز نتورک > دانلود رایگان > وب مستر > آموزش HTML & CSS > transition در CSS

transition در CSS

1399/11/03
ارسال شده توسط مهندس سمیه رشوند
آموزش HTML & CSS

مفهوم و تعریف کلی transition

معنای لغوی transition، به شکل “انتقال” و “تغییر از حالتی به حالت دیگر” تفسیر می‌شه.

تو یه تعریف دقیق و واضح تر می‌تونیم بگیم: “transition در CSS، به ما این قابلیت رو می‌ده که تغییرات رو در مدت زمان مشخصی به وجود بیاریم”

کار با ویژگی Transitions در css

به منظور اعمال افکت های transition روی یک عنصر html . شما ابتدا باید دو چیز را مد نظر داشته باشید:

۱- ویژگی css که قصد دارید. عمل transition را روی آن اعمال کنید. (مانند توبع جابه جایی ، انتقال یا تغییر اندازه عناصر و …).

۲-  تعیین مدت زمانی که می خواهید. در طول آن زمان، افکت transition اجرا شود.

نکته : اگر مدت زمان را تعیین نکنید .  بصورت پیش فرض مقدار “۰” در نظر گرفته می شود. و در نتیجه شما هیچ نتیجه ای را در اجرا مشاهده نخواهید کرد.

خاصیت های transition

برای استفاده از transition، می‌تونیم از چندین خاصیت استفاده کنیم که هر کدوم، کاربرد های خودشون رو دارن.

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

خاصیت transition-duration

این خاصیت، هسته اصلی transition تو عناصر ما به حساب میاد.

توسط این خاصیت، می‌تونیم مدت زمانی که یک transition طول می‌کشه رو تعیین کنیم.

در صورت استفاده نکردن از این خاصیت، هیچکدوم از خاصیت های دیگه transition ما کار نخواهند کرد.

ورودی این خاصیت، شامل مقادیر زمانی می‌شه و حتما باید بر حسب ثانیه “s” یا میلی ثانیه “ms” بیان بشن.

برای مثال، می‌خوایم وقتی نشانگر رو، روی دکمه بردیم، تغییر استایل دکمه، طی ۲ ثانیه اتفاق بیفته:

button{

transition-duration: 2s;

}

خاصیت transition-delay

این خاصیت، مدت زمان انتظاری رو قبل از اجرا شدن transition برای ما تعیین می‌کنه.

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

کافیه بنویسیم:

button{

   transition-delay: 2s; }

این خاصیت هم، دقیقا مثل خاصیت transition-duration، مقادیر زمانی بر حسب ثانیه و میلی ثانیه رو قبول می‌کنه.

خاصیت transition-timing-funtion

این خاصیت رو، زمانی استفاده می‌کنیم که می‌خوایم سرعت تغییر استایل در مراحل مختلف transition رو مشخص کنیم.

مقادیر زیر، مورد قبول این خاصیت هستن:

  • ease: مقدار پیش فرض
  • ease-in: این مقدار، با سرعت پایین شروع می‌کنه و در انتها به سرعت بالا می‌رسه.
  • ease-out: این مقدار، با سرعت بالا شروع می‌کنه و در انتها به سرعت پایین می‌رسه.
  • ease-in-out: این مقدار، با سرعت پایین شروع می‌کنه، در میانه به سرعت بالا می‌رسه و در انتها مجددا به سرعت پایین می‌رسه.
  • linear: این مقدار، تمام فرآیند رو با سرعت یکسان انجام می‌ده.

برای درک بهتر موضوع، به مثال های زیر دقت کنین:

تو مثال بالا، یک عنصر div رو می‌بینیم که تحت مقادیر مختلف transition-timing-function، از عرض ۱۰۰ پیکسل به عرض ۸۰۰ پیکسل تغییر می‌کنه.

خاصیت transition-property

این خاصیت، زمانی به کار می‌ره که ما می‌خوایم نحوه transition رو مشخص کنیم.

transition معمولا روی خاصیت هایی مثل width، opacity و … انجام می‌شه.

برای مثال، به کد زیر توجه کنین:

div{

transition-property: opacity;

}

مفهوم این خاصیت رو در زمان استفاده از چند transition مختلف، بیشتر متوجه می‌شیم.

خاصیت transition

این خاصیت، همون shorthand یا کوتاه شده ی تمامی خاصیت های مربوطه به transition هست.

توسط این خاصیت، می‌تونیم به سرعت و سادگی، تمامی دستورات مختص به transition رو در یک دستور جا بدیم.

برای مثال، دستورات زیر رو می‌تونیم به شکل خلاصه بنویسیم:

/* --- مفصل --- */
div{ transition-duration: 2s;
 transition-property: width;
 transition-delay: 3s;
 transition-timing-function: linear; 
}
/* --- خلاصه --- */
div{
   transition: width 2s 3s linear;
}

نکته ای که باید بهش توجه کنیم، اینه که قرار گرفتن مقادیر در این خاصیت، ترتیب خاصی نداره.

با این استثنا که باید همیشه مقدار delay رو بعد از duration قرار بدیم.

بررسی یک مثال کامل از transition

a {
  background–color: #139CFF;
  color:white;
  padding: 10px;
  border–radius: 7px;
  display: inline–block;
  font–family: helvetica;
  transition: background–color .5s, color .5s linear, border–radius 2s ease–out;
}
a:hover {
background–color: #35EC5C;
color: black;
border–radius: 30px;
}

توجه کنید که مانند نمونه کد بالا می‌توان همزمان از چند transition مختلف استفاده کرد به این شرط که آنها را به کمک (,) جدا کنید.

 transition در css

در کد بالا برای hover همزمان سه افکت در نظر گرفته شده از جمله: تغییر رنگ، تغییر بک‌گراند و گرد شدن دور دکمه. اما با هاور کردن دکمه همه‌ی افکت‌ها به یک باره اعمال نمی‌شوند و آن هم به دلیل استفاده کردن از transition است.

خاصیت های transition ناپذیر

تا اینجا خاصیت های مختلفی رو تو اجرای transition رو عناصر بررسی کردیم.

اما تمامی خاصیت های CSS، نمی‌تونن transition پذیر باشن.

طبق یک تعریف کلی، خاصیت های transition پذیر، به خاصیت هایی گفته می‌شه که می‌تونیم برای انجام اون ها، مراحل خاصی در نظر بگیریم.

برای مثال، خاصیت width، یک خاصیت transition پذیر محسوب می‌شه. چرا که برای تغییر عرض یک عنصر از ۱۰۰ پیکسل به ۵۰۰ پیکسل، می‌تونیم مراحل زیر رو طی کنیم:

  1. از ۱۰۰ تا ۲۰۰
  2. از ۲۰۰ تا ۳۰۰
  3. از ۳۰۰ تا ۴۰۰
  4. از ۴۰۰ تا ۵۰۰

یا برای تغییر شفافیت یک عنصر از ۰.۴ تا ۱، توسط خاصیت opacity، مراحل زیر رو طی می‌کنیم:

  1. از ۰.۴ الی ۰.۷
  2. از ۰.۷ الی ۱

اما خاصیت هایی مثل display، از خاصیت هایی هستن که نمی‌تونیم به اون ها transition و محدوده ی زمانی اختصاص بدیم.

چرا که مرحله خاصی ندارن. طبق خاصیت display، یک عنصر یا هست، یا نیست!

تو سایت مرجع developer.mozilla، می‌تونین خاصیت های transition پذیر رو مطالعه کنین.

پشتیبانی مرورگر ها

پشتیبانی مرورگر ها از خاصیت های transition به شرح زیره:

نام ویژگی Chrome Firefox Opera Safari IE
transition ۲۶٫۰ ۱۶٫۰ ۱۲٫۱ ۶٫۱ ۱۰٫۰
transition-delay ۲۶٫۰ ۱۶٫۰ ۱۲٫۱ ۶٫۱ ۱۰٫۰
transition-duration ۲۶٫۰ ۱۶٫۰ ۱۲٫۱ ۶٫۱ ۱۰٫۰
transition-property ۲۶٫۰ ۱۶٫۰ ۱۲٫۱ ۶٫۱ ۱۰٫۰
transition-timing-function ۲۶٫۰ ۱۶٫۰ ۱۲٫۱ ۶٫۱ ۱۰٫۰

رفع مشکل عدم پشتیبانی

برای رفع این مشکل ما باید از یسری دستورات بصورت پیشوندی در قبل از هر یک از این ویژگی ها استفاده نماییم. که برای هر مرورگر یک دستور ایجاد شده و به شرح زیر می باشد :

نام مرورگر Chrome Firefox Opera Safari
دستور پیشوندی -webkit- -moz- -o- -webkit-

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

نتیجه گیری

تو این فصل یاد گرفتیم که چطور می‌تونیم افکت های جذابی با استفاده از transitionها بسازیم.

خاصیت های مهمی تو این مقاله جذاب با هم یاد گرفتیم عبارت بودن از:

  • transition-duration: تعیین مدت زمان انجام transition
  • transition-delay: تعیین تاخیر قبل از انجام transition
  • transition-timing-function: تعیین نحوه انجام فرآیند transition
  • transition-property: تعیین خاصیت تحت transition

CSS Transitions و  CSS Transformations یک روش عالی برای دادن یک ظاهر خوب به تجربیات کاربران است.

آن‌ها کاملاً به زبان CSS ساخته شده اند، بنابراین، شما می‌توانید بدون نیاز به جاوا اسکریپت، افکت‌های زیبایی داشته باشید.

Transitions انتقال مدت زمان تغییر یک عنصر را مشخص می‌کند و حالت آرام را با گذشت زمان تغییر می‌دهد و بدون آن‌ها، تغییر حالت بصری، ناگهانی و فوری است.

برای اعمال تغییرات (Transitions)، می‌توانید از خصوصیات transition-property (مورد نیاز)، transition-duration (لازم)، transition-timing-function و transition-delay استفاده کنید. Transformها به طراحان وب این امکان را می‌دهد

که ظاهر یک عنصر را در یک سطح 2D جابجا یا تغییر دهند.

آن‌ها معمولاً با تغییر حالت شناور شروع می‌شوند. چهار نوع از transforms عبارتند از Rotate ،Skew ،Scale و Translate. معقول است

که هنگام استفاده از transformها از transitions استفاده کنید تا افکت صاف و تدریجی حاصل شود.

این تازه اول راهه، تو فصل انیمیشن های CSS خیلی بیشتر با این موارد کار می‌کنیم.

امیدوارم که بهره ی کافی رو برده باشین

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده: حانیه گل لاله کرمانی

 

برچسب ها: csshtmlTransformtransitiontransition-delayاج تی ام الترنزیشنسی اس اسمرورگر
قبلی آشنایی با Head در HTML قسمت اول
بعدی overflow در CSS

دیدگاهتان را بنویسید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.

  • آفیس (136)
    • آموزش اکسس (8)
    • آموزش اکسل (26)
    • آموزش پاورپوینت (24)
    • آموزش ورد (24)
    • طراحی و مستندسازی شبکه (Visio) (50)
    • عمومی (4)
  • ایمیل سرور (25)
    • Exchange Server (2)
    • MDaemon (13)
    • کریو کانکت (8)
  • پسیو شبکه (12)
    • دکل های مخابراتی (9)
  • تعمیرات (231)
    • آیفون و دزدگیر اماکن (26)
    • الکترونیک (16)
    • تعمیرات پرینتر (16)
    • تعمیرات تجهیزات میکروتیک (8)
    • تعمیرات لپ تاپ (23)
    • تعمیرات لوازم جانبی کامپیوتر (7)
    • تعمیرات لوازم خانگی (34)
    • تعمیرات مانیتور و تلوزیون (14)
    • تعمیرات منابع تغذیه (پاور) (26)
    • تعمیرات موبایل و تبلت (13)
    • تعمیرات هارد ، فلش و استوریج (22)
    • مادربرد و کارت گرافیک (34)
  • تکنسین شبکه (Help Desk) (2)
  • سانترال (14)
  • سخت افزار (15)
    • پردازنده (1)
    • پرینتر و اسکنر (2)
    • لپ تاپ (4)
    • مادربورد (3)
    • مانیتور (2)
    • مودم و اکسس پوینت (1)
    • وب کم و دوربین دیجیتال (1)
  • سرویس های هاستینگ (230)
    • ClamAV (3)
    • CloudLinux (4)
    • cpanel (27)
    • DirectAdmin (76)
    • Imunify360 (2)
    • Kernelcare (2)
    • Kloxo (1)
    • LightTPD (1)
    • LiteSpeed (5)
    • Outgoing Spam Monitor (osm) (2)
    • Plesk (4)
    • SolusVM (2)
    • Varnish Cache (2)
    • Virtualizor (9)
    • Webmin (1)
    • WHM (1)
    • WHMCS (3)
    • آپاچی (1)
    • دیتا سنتر (59)
    • سرور (17)
    • سرویس های ابری (13)
    • نرم افزارهای ریموت دسکتاپ (5)
  • سیسکو (31)
  • طراحی وب سایت (8)
  • کلاس های آنلاین (227)
    • Cisco Webex (1)
    • Discord (1)
    • Google Meet (1)
    • Iomad (1)
    • Kaltura (1)
    • LiteCart (1)
    • Matrix (2)
    • OpenMeetings (1)
    • Slack (1)
    • ZOOM (1)
    • ادوب کانکت (64)
    • بیگ بلو باتن (50)
    • جیتسی (7)
    • راکت چت (چت سازمانی) (26)
    • رکورد فیلم آموزشی (2)
    • مودل فارسی (62)
  • گرافیک و انیمیشن (7)
  • لینوکس و یونیکس (170)
  • مانیتورینگ (18)
    • solarwinds (17)
  • مایکروسافت (70)
    • MCSE (39)
    • SCCM (3)
    • SCOM (1)
    • SQL Server (1)
    • شیرپوینت (2)
  • مجازی سازی شبکه (16)
    • Veeam (10)
    • VMware Esxi (4)
  • مدیریت و امنیت اطلاعات (7)
  • میکروتیک (113)
  • وب مستر (155)
    • آموزش HTML & CSS (41)
    • آموزش وردپرس (61)
    • ایمیل مارکتینگ (1)
    • بوت استرپ (6)
    • سئو (13)
    • کسب در آمد از اینترنت (12)
    • یوتیوب (18)
  • ویپ (2)
    • ایزابل (2)
  • ویتایگر CRM (36)
    • Odoo / Open ERP (1)
  • ویندوز (11)
    • ویندوز 10 (6)
    • ویندوز 11 (3)
    • ویندوز 7 (2)
هر گونه دخل و تصرف در محتوای آموزشی سایت فراز نتورک منع و پیگرد قانونی دارد، استفاده با ذکر منبع آزاد می باشد