transition-property

از ویژگی transition-property برای تعیین ویژگی هایی که قرار است transition بر روی آنها اعمال شود استفاده می شود.

به عنوان مثال اگر بخواهیم transition فقط بر روی رنگ پس زمینه یک عنصر اعمال شود داریم:

div {
  transition-property : background-color;                        
}

شما می توانید نام یک ویژگی و یا چند ویژگی که با استفاده از ویرگول از هم جدا شدند را بنویسید و یا می توانید از کلمه کلیدی all استفاده کنید تا transition بر روی تمام ویژگی های آن عنصر که قابلیت داشتن transition را دارند اعمال شود. اگر می خواهید تا هیچگونه transition بر روی هیچ یک از ویژگی های یک عنصر اعمال نشود کافی است از کلمه کلیدی none استفاده کنید.

transition-property: none; /* هیچ ویژگی ترنزیشن نگیرد */
transition-property: all; /* همه ویژگی ها ترنزیشن داشته باشند */
transition-property: letter-spacing, font-size, line-height; /* تنها این ویژگی ها ترنزیشن داشته باشند */

زمانی که شبیه به روش آخر ویژگی ها را برای transition تعیین می کنید باید ترتیب آنها را در زمان تعیین دیگر ویژگی های transition برای آنها در نظر داشته باشید. دیگر ویژگی های transition شامل موارد زیر هستند:
transition-duration
transition-timing-function
transition-delay

در مثال زیر ویژگی color دارای دوره زمانی 2s و transition-timing-function آن برابر ease می باشد و دیگر ویژگی ها هم به ترتیب به همین صورت مقادیرشان تعیین می شود.

.element {
  transition-property: color, background-color, left, top;
  transition-duration: 2s, 1s, .3s, .2s;
  transition-timing-function: ease, steps(3, end), ease-out, ease-in;
}

معمولا تعیین transition-property از طریق مختصر نویسی ویژگی transition کار راحتتری می باشد.

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

دموی زیر برای بررسی بیشتر آماده شده است:

See the Pen transition-property by Mojtaba Seyedi (@seyedi) on CodePen.

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