معرفی و آموزش transition در css
معرفی و آموزش transition در css
معرفی و آموزش transition در css

سلام دارم خدمت دوستان.

با پست معرفی و آموزش transition در css مزاحمتون میشیم 🙂

خب ،

شروع کار:

شاید براتون پیش اومده باشه که بخاید مثلا وقتی رنگ یه متن توی قالبتون با رفتن ماوس روی اون عوض میشه ، آروم و روان باشه تا یهویی.

یا وقتی یه عنصر حرکت میکنه ، تدریجی حرکت کنه ،

برای درک بهتر توی صفحه زیر ماوستون رو روی مربع قرمز ببرید.

اینجا کلیک کنید

 

خب حالا فهمیدید 🙂

 

کد و تمرین:

خب کلا کد های اون صفحه رو بیخیال بشید ، خودم روان واستون توضیح میدم:

این خاصیت ۲ تا بخش مهم و کلیدی داره

transition: part1 part2

 

خب پارت اول نوع حرکت رو مشخص میکنه.

یعنی مثلا توی تغییر سایز عنصر اعمال بشه ، توی تغییر رنگ ، توی تغییر کادر و یا همه تغییرات.

یه سری از مثال های رایج:

all = همه تغییرات

color = فقط رنگ

width , height = فقط ارتفاع و طول

border = فقط کادر

و…

 

خب پس تا اینجا یکی از بخش هاشو پر کردیم .

 

بخش دومش مدت زمان رو مشخص میکنه :

مثلا طی ۱ ثانیه حرکت انجام بشه ، کمتر و یا بیشتر.

معمولا برای تغییر لینک و اینچیزا ۰٫۵ تا ۰٫۲ رو انتخاب میکنن.

حتما یادتون باشه بعد از عدد ، حرف s  رو به معنای ثانیه بزارید.

 

خب کارمون تمومه تغریبا.

این تگ خواص پیشرفته ای هم داره که من فعلا وقت ندارم توضیح بدم.

و خیلی هم کاربردیه.

معرفی و آموزش transition در css

امیدوارم استفاده کرده باشید ،

حتما ببینید:   آموزش جامع زیبا سازی کادر ها در css

آریا مقصودی

اشتراک این مطلب در تلگرام.

نظر شما چیه؟

  1. سعید گفته:

    سلام.
    مطالبتون خیلی جالبن.
    در مورد کد نویسی بیشتر مطلب بزارید

  2. Ali27 گفته:

    سلام دوست عزیز.
    لطفا در زمینه ی این Transition و Transform مطالب بیشتری بزارید دوست دارم یادشون بگیرم.
    ممنون .