درخواست :توضیحی در مورد کدهای css زیر

[noroozifar]

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

می خواهم بدانم این کدها چه کار میکنند البته قسمت box-shadow و scale و transform ممنونم :
کدها :
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 12px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-ms-transform: scale(0);
transform: scale(0);
}
.ch-item:hover {
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1);
}

ch-item:hover . {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}

[qartalonline]

توسط box-shadow میتونید به یک کادر سایه بدید.
بیشتر بدانید: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

توسط transform میتونید یک عنصر رو کج ، کشیده ، چرخش ، ... بدید.
بیشتر بدانید:https://developer.mozilla.org/en-US/docs/Web/CSS/transform

توسط scale میتونید اندازه یک عنصر رو کوچک یا بزرگ کنید.
بیشتر بدانید:http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transform_scale

[noroozifar]

قسمت transition: all 0.4s ease-in-out; آورده شده در کدها و متوجه شده ام همه خصوصیات ch-item را به مدت 4 میلی ثانیه به صورت آهسته از شروع تا پایان اجرا میکنه اما متوجه نشده ام چه زمانی ؟ ایا زمانی هست که صفحه لود میشه یا زمانیکه mouse روی آن میره ؟


تقاضای هم از مدیران دارم یک جای برای درخواست توضیح کدها میگذاشتند خوب بود تا مثل ماها بلد نیستیم می آمدیم از دیگران میپرسیدم

[qartalonline]

مثلا شما نوشته یا لینکی دارید که رنگ اون سیاه هستش. بعد میخوان وقتی موس میره روی لینک رنگ لینک سفید بشه ، در حالت عادی این کار در یک لحظه (نه یک ثانیه) و به سرعت انجام میشه ، حالا وقتی به استایل اون قسمت کد transition: all 0.4s ease-in-out; رو اضافه میکنید 0.4 ثانیه طول میکشه تا هنگام که موس روی لینک میره رنگش از سیاه به سفید تبدیل بشه و برعکس ، و تغییر رنگ بصورت نرم و آهسته انجام میشه.

[noroozifar]

ببینید من در قسمت .ch-item:hover فقط یک box-shadow اضافه شده و چیزی دیگری از transition نیست وقتی all استفاده میکنیم مگر نباید حالا در Hover مربوط به موس مقادیر width یا height یا cursor را تغییر بدم تا transition اجرا بشه به مدت 0.4 = بدون تغییر این مقادیر ایا transition باز هم کار میکنه اگر کار میکنه پس باید در زمان لود شدن صفحه باشه ؟

[qartalonline]

شما وقتی در transition مربوط به .ch-item از ease-in-out استفاده میکنید زمان تغییر استایل (0.4 ثانیه) هم شامل تغییر به حالت hover و هم شامل تغییر از حالت Hover به حالت عادی میباشد.
حالا اگه در hover ، مقادیر رو تغییر ندید ولی وجود داشته باشن ، transition اجرا میشه.

[f_talebi]

شما وقتی در transition مربوط به .ch-item از ease-in-out استفاده میکنید زمان تغییر استایل (0.4 ثانیه) هم شامل تغییر به حالت hover و هم شامل تغییر از حالت Hover به حالت عادی میباشد.
حالا اگه در hover ، مقادیر رو تغییر ندید ولی وجود داشته باشن ، transition اجرا میشه.
این یعنی که اگه ease-in باشه، زمان تغییر استایل فقط شامل موقعیه که hover میکنیم؟
این all برای چی استفاده میشه؟

[2undercover]

این یعنی که اگه ease-in باشه، زمان تغییر استایل فقط شامل موقعیه که hover میکنیم؟
این all برای چی استفاده میشه؟

خیر اونها حالت های easing هستند. مثلا:

linear در تمام طول افکت با سرعت یکسان اعمال میشه.
ease شروع افکت آرام بعد سریع و بعد دوباره آرام (سرعت آغاز و پایان یکسان)
ease-in فقط شروع افکت آرام
ease-out فقط پایان افکت آرام
ease-in-out شروع و پایان افکت آرام هستند (سرعت شروع از پایان کمی کمتر است)
cubic-bezier(n,n,n,n) با استفاده از اعدادی که خودتون می دید سرعت تنظیم میشه

----

all هم به این معنا هست که روی تمام تغییرات این transition اعمال بشه.

که شما می تونید مثلا با قرار دادن width به جای all کاری کنید که این transition فقط روی تغییر پهنا اعمال بشه!