Style transition ਗੁਣ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

transition ਇਹ ਗੁਣ ਚਾਰ ਟਰਾਂਜ਼ੀਸ਼ਨ ਗੁਣਾਂ ਦਾ ਸ਼ਾਬਦਿਕ ਗੁਣ ਹੈ:

ਟਿੱਪਣੀ:ਹਰ ਸਮੇਂ ਇਸ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰੋ transitionDuration ਗੁਣਅਗਰ ਇਹ ਨਾ ਕੀਤਾ ਜਾਵੇ ਤਾਂ ਟਰਾਂਜ਼ੀਸ਼ਨ ਨੂੰ 0 ਦੇ ਰੂਪ ਵਿੱਚ ਦੇਣਾ ਹੋਵੇਗਾ ਅਤੇ ਟਰਾਂਜ਼ੀਸ਼ਨ ਨਾਲ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ。

ਹੋਰ ਦੇਖੋ:

CSS ਜਾਣਕਾਰੀ ਕੈਸ਼ਮਨtransition ਗੁਣ

ਇੱਕ ਉਦਾਹਰਣ

ਮਾਉਸ ਨੂੰ div ਐਲੀਮੈਂਟ 'ਤੇ ਰੱਖਣ ਨਾਲ ਹੀ ਇਸ ਦਾ ਰੂਪ ਕ੍ਰਮਵਾਰਤਾ ਵਿੱਚ ਬਦਲੇਗਾ:

document.getElementById("myDIV").style.transition = "all 2s";

ਸਵੈ ਮੁਕਾਬਲਾ ਕਰੋ

ਸਿਧਾਂਤ

transition ਗੁਣ ਵਾਪਸ ਪ੍ਰਾਪਤ ਕਰੋ:

object.style.transition

transition ਗੁਣ ਸੈਟ ਕਰੋ:

object.style.transition = "property duration timing-function delay|initial|inherit"

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
transitionProperty ਟਰਾਂਜ਼ੀਸ਼ਨ ਐਫਕਟ ਦੇ ਲਈ ਸੰਬੰਧਿਤ CSS ਗੁਣ ਦਾ ਨਾਮ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ
transitionDuration ਟਰਾਂਜ਼ੀਸ਼ਨ ਐਫਕਟ ਦੇ ਮੁਕੰਮਲ ਹੋਣ ਲਈ ਜ਼ਰੂਰੀ ਸਮੇਂ ਜਾਂ ਮਿਲੀਸੀਕੰਡ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ
transitionTimingFunction ਟਰਾਂਜ਼ੀਸ਼ਨ ਐਫਕਟ ਦੀ ਗਤੀ ਦੀ ਕ੍ਰਮਵਾਰਤਾ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ
transitionDelay ਟਰਾਂਜ਼ੀਸ਼ਨ ਐਫਕਟ ਜਦੋਂ ਸ਼ੁਰੂ ਹੋਵੇਗਾ ਦੇਣ ਲਈ ਗੁਣ
initial ਇਹ ਗੁਣ ਇਸ ਗੁਣ ਦੇ ਮੂਲਤਬੀ ਮੁੱਲ 'ਤੇ ਸੈਟ ਕਰੋ। ਦੇਖੋ initial.
inherit ਇਹ ਗੁਣ ਆਪਣੇ ਮਾਤਾ ਐਲੀਮੈਂਟ ਤੋਂ ਇਸ ਗੁਣ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਦੇਖੋ inherit.

ਤਕਨੀਕੀ ਵੇਰਵਾ

ਮੂਲਤਬੀ ਮੁੱਲ: all 0 ease 0
ਵਾਪਸ ਪ੍ਰਾਪਤ ਕਰਨਾ ਕੋਈ ਚਿੰਨ੍ਹ, ਜੋ ਪੈਮੈਂਟ ਦੇ ਇਲਾਵਾ ਵਿਸ਼ੇਸ਼ ਗੁਣ ਦਰਸਾਉਂਦਾ ਹੈ transition ਗੁਣ.
CSS ਆਈਸੀ: CSS3

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਨੰਬਰ ਇਸ ਗੁਣ ਪਹਿਲੀ ਤੋਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਊਜ਼ਰ ਦੀ ਆਈਸੀ ਸੂਚੀ ਸਾਰੇ ਹਨ。

ਚਰਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪੇਰਾ
ਚਰਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪੇਰਾ
26.0 10.0 16.0 6.1 12.1