CSS ਟਰਾਂਸਿਜ਼ਨ-ਟਾਈਮਿੰਗ-ਫੰਕਸ਼ਨ ਪ੍ਰਾਪਰਟੀ

ਨਿਰਧਾਰਣ ਅਤੇ ਵਰਤੋਂ

transition-timing-function ਪ੍ਰਤੀਭਾਵ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਪ੍ਰਭਾਵ ਦੀ ਗਤੀ ਲਾਈਨ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

ਇਹ ਪ੍ਰਤੀਭਾਵ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਪ੍ਰਭਾਵ ਦੀ ਗਤੀ ਨੂੰ ਸਮੇਂ ਨਾਲ ਬਦਲਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ。

ਹੋਰ ਦੇਖੋ:

CSS ਸਿੱਖਿਆ:CSS ਟਰਾਂਸਿਜ਼ਨ

HTML DOM ਸੂਚੀਕਰਣ:transitionTimingFunction ਪ੍ਰਤੀਭਾਵ

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਸਮਾਨ ਗਤੀ ਨਾਲ ਸ਼ੁਰੂ ਤੋਂ ਸਮਾਪਤ ਤੱਕ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਪ੍ਰਭਾਵ:

div
{
transition-timing-function: linear;
}

ਆਪਣੇ ਆਪ ਮੈਂਟਰੀ ਕਰੋ

CSS ਗਰੰਟਰ

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

ਪ੍ਰਤੀਭਾਵ

ਕੀਮਤ ਵਰਣਨ
linear ਸਮਾਨ ਗਤੀ ਨਾਲ ਸ਼ੁਰੂ ਤੋਂ ਸਮਾਪਤ ਤੱਕ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਪ੍ਰਭਾਵ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ (cubic-bezier(0,0,1,1) ਦੇ ਬਰਾਬਰ ਹੈ)。
ਈਜ਼ ਛੇਤੀ ਸ਼ੁਰੂ ਹੋਣ, ਫਿਰ ਤੇਜ਼ ਹੋਣ, ਅਤੇ ਫਿਰ ਛੇਤੀ ਸਮਾਪਤ ਹੋਣ ਵਾਲੇ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਪ੍ਰਭਾਵ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ (cubic-bezier(0.25,0.1,0.25,1) ਦੇ ਬਰਾਬਰ ਹੈ)。
ease-in ਛੇਤੀ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਪ੍ਰਭਾਵ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ (cubic-bezier(0.42,0,1,1) ਦੇ ਬਰਾਬਰ ਹੈ)。
ease-out ਛੇਤੀ ਸਮਾਪਤ ਹੋਣ ਵਾਲੇ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਪ੍ਰਭਾਵ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ (cubic-bezier(0,0,0.58,1) ਦੇ ਬਰਾਬਰ ਹੈ)。
ease-in-out ਛੇਤੀ ਸ਼ੁਰੂ ਅਤੇ ਸਮਾਪਤ ਹੋਣ ਵਾਲੇ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਪ੍ਰਭਾਵ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ (cubic-bezier(0.42,0,0.58,1) ਦੇ ਬਰਾਬਰ ਹੈ)。
cubic-bezier(n,n,n,n) cubic-bezier ਵਿੱਚ ਆਪਣੀ ਕੀਮਤ ਨਿਰਧਾਰਿਤ ਕਰੋ। ਸੰਭਵ ਕੀਮਤਾਂ 0 ਤੋਂ 1 ਦਰਮਿਆਨ ਦੀਆਂ ਹੁੰਦੀਆਂ ਹਨ。

ਸੁਝਾਅ:ਵੱਖ-ਵੱਖ ਮੁੱਲਾਂ ਨੂੰ ਉਦਾਹਰਣ ਵਿੱਚ ਟੈਸਟ ਕਰੋ, ਤਾਂ ਇਹ ਇਨ੍ਹਾਂ ਦੇ ਕਾਰਜ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਬਿਹਤਰ ਢੰਗ ਨਾਲ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਮੁੱਲ: ਈਜ਼
ਵਿਰਾਸਤੀ ਤ੍ਰਿਤੀਕਤਾ: ਨਹੀਂ
ਸੰਸਕਰਣ: CSS3
ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਰੰਥ ਆਬਜ਼.style.transitionTimingFunction="linear"

ਹੋਰ ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 2

ਵੱਖ-ਵੱਖ ਫੰਕਸ਼ਨ ਦੇ ਮੁੱਲ ਨੂੰ ਬਿਹਤਰ ਢੰਗ ਨਾਲ ਸਮਝਣ ਲਈ ਹੇਠ ਵਿੱਚ ਦਿਖਾਏ ਗਏ ਪੰਜ ਵੱਖ-ਵੱਖ ਵੱਡੇ div ਤੰਤਰ ਨੂੰ ਦੇਖੋ:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

ਆਪਣੇ ਆਪ ਮੈਂਟਰੀ ਕਰੋ

ਉਦਾਹਰਣ 3

ਇਹ ਮੌਕਾ ਨਾਲ ਹੀ ਹੈ, ਪਰ cubic-bezier ਰਾਹੀਂ ਗਤੀ ਪਟਰੀ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹਨ:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

ਆਪਣੇ ਆਪ ਮੈਂਟਰੀ ਕਰੋ

ਬਰਾਉਜ਼ਰ ਦੀ ਸਮਰਥਨ

ਸਾਰੇ ਪੰਨਿਆਂ ਵਿੱਚ ਨੰਬਰ ਦੇ ਦੇਖੋ ਹੈ ਕਿ ਉਸ ਅਤੀਤ ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਇਹ ਅਤਿਅੰਤ ਸਮਰਥਿਤ ਹੈ ਕਿ ਇਹ ਵਿਸ਼ੇਸ਼ ਵਿਸ਼ੇਸ਼ਤਾ ਕਿਵੇਂ ਹੈ。

ਦੇਖੋ -webkit-,-moz- ਜਾਂ -o- ਨਾਲ ਸਮਾਂ ਦੀ ਪਹਿਲੀ ਸੰਸਕਰਣ ਨੂੰ ਵਰਤਣ ਲਈ ਨੰਬਰ ਦੇ ਨਾਲ ਸਮਾਂ ਦੀ ਪਹਿਲੀ ਸੰਸਕਰਣ ਨੂੰ ਦਿਖਾਇਆ ਗਿਆ ਹੈ。

ਚਰਮੀ IE / ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-