transition-timing-function յատկութիւնը

transition-timing-function յատկութիւնը սահմանում է փափուկ անցման transition արագութեան փոփոխութիւնը (արագացումը): Օրինակ՝ սկզբում դանդաղ, ապա արագ, ապա դանդաղ եւ այլն:

Շարահիւսութիւն

cssընտրիչ {
  transition-timing-function: արժէք;
}

Արժէքներ

Լռելայն արժէքը՝ ease:

Տարբեր արժէքների համեմատութիւն

Մկնիկը տեղափոխիր ներքեւ ներկայացուած բլոկների վրայ, որպեսզի տեսնես բոլոր տեսակի ժամանակային ֆունկցիաների աշխատանքը:

Օրինակ

Մկնիկը տեղափոխիր բլոկի վրայ - այն փափուկ կերպով կփոխի իր լայնութիւնը 2 վայրկեանի ընթացքում: Քանի որ սահմանուած է ease-in արժէքը, անիմացիան կսկսի դանդաղ եւ աստիճանաբար կարագանայ:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-timing-function: ease-in;
  transition-duration: 2s;
  transition-property: width;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Տես նաեւ