در این قسمت از فیلم آموزش CSS3 درباره دستور Transition آموزش داده شده است ، در این آموزش Transition همه ویژگی های transition آموزش داده شده است که در فیلم آموزشی می توانید مشاهده کنید .
آموزش Transition :
وقتی این ویژگی Transition رو برای یک عنصر تعریف بکنیم ، کاربر می تواند آن عنصر را به صورت متحرک در طول زمان مشاهده کند و همین موضوع باعث می شود که کاربر متوجه تغییرات انجام شده بشود و با این کار زیبایی خاصی به عناصر می توانیم بدهیم و هم چنین تجربه کاربری بهتری هم دارد .
همه ویژگی های دستور transition به صورت زیر می باشد . ترتیب نوشتن آن ها هم خیلی مهم می باشد :
transition-property
transition-duration
transition-timing-function
transition-delay
ویژگی transition-property :
با این ویژگی اون عنصری را انتخاب می کنیم که می خواهیم تغییر آن را مشاهده کنیم .
ویژگی transition-duration :
با استفاده از این ویژگی مدت زمان transition را مشخص می کنیم .
ویژگی transition-timing-function :
این ویژگی یک تابع است و مشخص می کند این عنصری را که انتخاب کرده ایم که در یک زمان مشخص به ما نشان داده شود ، این ویژگی به چه صورت نمایش داده شود مثلاً زود شروع بشه و یک هویی تموم بشه یا بلعکس . اگه فیلم رو مشاهده کنید در انتهای فیلم این تابع رو به صورت کامل توضیح دادم .
ویژگی transition-delay :
این ویژگی مدت زمان مکص قبل از اعمال transition رو مشخص می کند .
div{
width:100px;
height:100px;
background-color: red;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay:1s;
}
div:hover{
width:300px;
}
به این شکل نوشتن باعث میشه حجم کد بالا بره و هم یکم شلوغ بشه به جای این که تک تک بنویسید می تونید به صورت یک جا همه مقادیر ویژگی ها رو داخل transition بنویسید در این جا هم باید ترتیب نوشتن رو رعایت کنید .
نکته : به این نکته هم توجه کنید که باید مقدار یک عنصر تغییر پیدا کنه تا بشود با استفاده از transition تغییرات آن را مشاهده کرد ، برای این کار از دستور hover یا دستور active می توانید استفاده کنید .
کد HTML در آموزش Transition :
<!DOCTYPE html> <html> <head> <title>Web30ty</title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <div></div> </body> </html>
کد CSS :
در عین حال می تونید به چندین عنصر دستور transition رو بدید مثل کد زیر که باید برای جدا کردن از ویرگول استفاده کنید .
div{
width:100px;
height:100px;
opacity: 1;
background-color: red;
transition: transform 3s ease-out , background-color 2s , opacity 6s ease-out;
}
div:active{
transform: translate3d(1000px , 50px , 200px);
background-color: yellow;
opacity: 0.2;
}
در جلسه قبل هم که در مورد آموزش Transform رو گفته بودم می تونید از اون استفاده کنید و زیبایی صفحه وب خودتون رو دو چندان کنید .
لینک خرابه
درست شد .
سلام آموزش خوبی بود
خسته نباشید
ممنون
سلام
میتونم آموزش هاتون رو با ذکر منبع تو سایت خودم بزارم
سلام بله مشکلی نیست
این جلسه از آموزش آخرین جلسه css3 است؟
بعد آیا آموزش php هم دارید؟
سلام
این آخرین جلسه CSS3 نیست ان شالله ادامه داره و قسمت های بعدی رو به زودی آپلود می کنیم .
اگر این فیلم های آموزشی تموم بشن بعد از اینا آموزش php رو هم شروع خواهیم کرد .
سلام
ان شاالله هر چی از خدا بخواهید بهتون بده
واقعا من هم html و همcss و هم css3 و c++ رو با سایت شما دنبال میکنم آموزش هاتون عالیه
لطفا css3 رو هر چه زود تر کامل کنید و آموزش php رو هم شروع کنید
سلام
ممنون از آموزش عالیتون
آیا آموزش php هم تو سایت میگذارید؟
خیلی عالیه
تو زمینه ای که فعالیت میکنید جزو بهترین سایت ها هستید