CSS ਟ੍ਰਾਂਸੀਸ਼ਨ ਪ੍ਰਾਪਰਟੀ

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

transition ਲੈਬਲ ਇੱਕ ਸ਼ਾਰਟਕੈਟ ਲੈਬਲ ਹੈ ਜੋ ਚਾਰ ਟ੍ਰਾਂਜਿਸ਼ਨ ਲੈਬਲਾਂ ਨੂੰ ਸੈਟ ਕਰਦਾ ਹੈ:

ਟਿੱਪਣੀ:ਹਮੇਸ਼ਾ ਸੈਟ ਕਰੋ transition-duration ਅਜਿਹੇ ਲੈਬਲ ਨਾ ਹੋਣ ਤਾਂ ਦਰਸਾਵਾਜ਼ ਦਾ ਸਮਾਂ 0 ਹੋਵੇਗਾ ਅਤੇ ਟ੍ਰਾਂਜਿਸ਼ਨ ਇਫੈਕਟ ਪੈਦਾ ਨਹੀਂ ਹੋਵੇਗਾ。

ਹੋਰ ਦੇਖੋ:

CSS ਟੂਰ:CSS ਟ੍ਰਾਂਸੀਸ਼ਨ

HTML DOM ਸੰਦਰਭ ਮੁੱਲਾਂਕਣ:transition ਲੈਬਲ

ਮਾਡਲ

ਮਾਉਸ ਨੂੰ div ਐਲੀਮੈਂਟ 'ਤੇ ਰੱਖੋ, ਉਸ ਦੀ ਚੌਦਾਈ 100px ਤੋਂ 300px ਤੱਕ ਪਾਰਦਰਸ਼ਤਾ ਵਧੇਗੀ:

div {
  width: 100px;
  transition: width 2s;
}

ਆਪਣੇ ਆਪ ਦੋਹਰਾਓ

CSS ਗਰੰਥ

transition: ਪ੍ਰਪਰਟੀ ਦਰਸਾਵਾਜ਼ ਟਾਈਮਿੰਗ-ਫੰਕਸ਼ਨ ਦੇਲੇ;

ਲੈਬਲ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
transition-property ਟ੍ਰਾਂਜਿਸ਼ਨ ਇਫੈਕਟ ਦੇ ਸੈਟ ਕੀਤੇ ਜਾਣ ਵਾਲੇ CSS ਲੈਬਲ ਦਾ ਨਾਮ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。
transition-duration ਟ੍ਰਾਂਜਿਸ਼ਨ ਇਫੈਕਟ ਪੂਰਾ ਹੋਣ ਲਈ ਕਿਤਨੇ ਸਿਕੰਦਰ ਜਾਂ ਮਿਲੀਸਕੰਦਰ ਦੀ ਲੋੜ ਹੈ。
transition-timing-function ਸਪੀਡ ਇਫੈਕਟ ਦੀ ਗਤੀ ਲਾਈਨ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。
transition-delay ਟ੍ਰਾਂਜਿਸ਼ਨ ਇਫੈਕਟ ਜਦੋਂ ਸ਼ੁਰੂ ਹੋਵੇਗਾ ਦੱਸਦਾ ਹੈ。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਮੁੱਲ: all 0 ease 0
ਵਿਰਾਸਤੀ ਤੌਰ 'ਤੇ: no
ਵਰਜਨ: CSS3
JavaScript ਗਰੰਥ object.style.transition="width 2s"

ਬਰਾਉਜਰ ਸਮਰਥਨ

ਸਾਰੇ ਅੰਕ ਇਸ ਗੱਲ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ ਕਿ ਕਿਸ ਬਰਾਉਜ਼ਰ ਵਰਜਨ ਵਿੱਚ ਇਹ ਲੈਬਲ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਕਰਦਾ ਹੈ。

ਅੰਕ ਦੇ -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-