transition یک ویژگی از نوع ویژگی های مختصر نویسی می باشد که با استفاده از آن می توان ویژگی های زیر را به صورت یکجا و مختصر در CSS تعریف کرد:
transition-property
transition-duration
transition-timing-function
transition-delay
ترتیب نوشتن این ویژگی ها با استفاده از ویژگی transition مهم است و باید به ترتیب اشاره شده در بالا نوشته شوند. اولین عددی که نشان دهنده زمان باشد به عنوان مقدار ویژگی transition-duration و دومین زمان به عنوان مقدار ویژگی transition-delay ثبت می شوند.
به عنوان مثال داریم:
div {
transition: background-color .3s linear 1s;
}
و این ویژگی اجازه تعریف چند transition را هم می دهد به شرط اینکه آن ها را با استفاده از ویرگول از هم جدا کنیم:
div {
transition: background-color 1s linear,
left .6s ease-out 1s,
transform 1s steps(3, start);
}
ویژگی transition را برای یک عنصر تعریف می کنیم تا کاربر بتواند تغییر ویژگی های خاصی از آن عنصر را به صورت متحرک در طول زمان مشاهده کند. این امر به کاربر کمک می کند تا متوجه انجام تغییرات شود و تجربه کاربری بهتری داشته باشد.
تمام ویژگی های یک عنصر را نمی توان با استفاده از transition متحرک سازی کرد. در این مطلب لیستی از ویژگی هایی که transition بر روی آنها اعمال می شود آمده است.
در مثال زیر در زمان hover:, تغییر رنگ پس زمینه شکل و همینطور تغییر مکان آن یک بار با transition و یک بار بدون آن به نمایش گذاشته شده است:
See the Pen transition by Mojtaba Seyedi (@seyedi) on CodePen.
ممنون از شما
اینم اولین transition من:
http://codepen.io/soran/ful…
به عنوان اولی, عالی بود :)
موفق باشید
من میخوام از چپ به راست باشه نمیشه! :((((((((
عه؟؟ شد که:
https://jsbin.com/guzuceb/1/edit?html,css,output
:)
چطوری ریسپانس میشه کردش ؟
قالب رو بعد از hover از ریسپانیوی در میاره :/
سلام شما تو متن گفتین که ویژگی هایی که برای transition تعریف میکنید باید به ترتیب باشه ولی من بدونم ترییب تست کردم جواب داد لطفا اصلاح کنید :)
نه داداش داری اشتباه میزنی ، نگفته که نمیشه ، میشه ، برای اینکه به ترتیبی که میخوای اجرا بشه باید کدت رو به همون ترتیب بزنی
سلام خسته نباشید ، به نظر شما برای عناصر دیگه ای غیر از اینا که فرمودید transition نمیشن یا در حال انتقال فقط یکی شون میشن ، چه کنیم ؟
کدی هست که شامل هر نوع عنصری باشه ؟
با سلام ببخشید من یه مشکلی داشتم من میخوام به یک transition بدم که وقتی روی آن کلیک کنند سایزش بزرگ تر بشه ولی یه مشکلی که هست اینه که وقتی این کارو میکنم اون تگی که پایین این هستش هم با این میاد به این طرف لطفا کمک کنید ممنون.