CSS transition-property ਪ੍ਰਤੀਯੋਗਿਤਾ
- ਪਿਛਲਾ ਪੰਨਾ transition-duration
- ਅਗਲਾ ਪੰਨਾ transition-timing-function
ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ
transition-property ਗੁਣ ਪਰਿਵਰਤਨ ਦੇ ਪ੍ਰਭਾਵ ਵਾਲੇ CSS ਗੁਣ ਦੇ ਨਾਮ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ (ਜਦੋਂ ਦਿੱਤੇ ਗਏ CSS ਗੁਣ ਵਿੱਚ ਪਰਿਵਰਤਨ ਹੋਵੇਗਾ ਤਾਂ ਪਰਿਵਰਤਨ ਦਾ ਪ੍ਰਭਾਵ ਹੋਵੇਗਾ)。
ਸੁਝਾਅ:ਪਰਿਵਰਤਨ ਦਾ ਪ੍ਰਭਾਵ ਆਮ ਤੌਰ 'ਤੇ ਯੂਜ਼ਰ ਨਾਲ ਮਾਉਸ ਦੀ ਨਿਰਧਾਰਕ ਪਿੰਡੀ ਨੂੰ ਏਲੀਮੈਂਟ ਉੱਤੇ ਰੱਖਣ ਨਾਲ ਹੁੰਦਾ ਹੈ。
ਟਿੱਪਣੀ:ਹਰ ਸਮੇਂ ਸੈਟ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ transition-duration ਗੁਣ ਦੀ ਅਸਮਰੱਥਾ ਦੇ ਪਹਿਲੇ ਮੁੱਲ ਦੇ ਬਿਨਾ ਸਮਾਂ ਲਗਾਉਣਾ ਹੈ ਤਾਂ ਪਰਿਵਰਤਨ ਦਾ ਪ੍ਰਭਾਵ ਨਹੀਂ ਹੋਵੇਗਾ。
ਹੋਰ ਦੇਖੋ:
CSS ਟੂਰCSS ਟ੍ਰਾਂਜਿਸ਼ਨ
HTML DOM ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ:transitionProperty ਗੁਣ
ਉਦਾਹਰਣ
ਮਾਉਸ ਦੀ ਨਿਰਧਾਰਕ ਪਿੰਡੀ ਨੂੰ div ਏਲੀਮੈਂਟ ਉੱਤੇ ਰੱਖਣ ਨਾਲ ਹੋਵੇਗਾ ਬਰਾਊਜ਼ਰ ਦੀ ਚੌਡਾਈ ਵਿੱਚ ਹੌਲੀ ਪਰਿਵਰਤਨ ਵਾਲਾ ਪਰਿਵਰਤਨ ਪ੍ਰਭਾਵ:
div {
transition-property: width;
}
CSS ਗਰੈਮੇਟਰਸਿਜ਼
transition-property: none|all|property;
ਗੁਣ ਮੁੱਲ
| ਮੁੱਲ | ਵਰਣਨ |
|---|---|
| none | ਕੋਈ ਗੁਣ ਪਰਿਵਰਤਨ ਦੇ ਪ੍ਰਭਾਵ ਦਾ ਨਹੀਂ ਹੋਣਗੇ。 |
| all | ਸਾਰੇ ਗੁਣ ਪਰਿਵਰਤਨ ਦੇ ਪ੍ਰਭਾਵ ਦਾ ਹੋਣਗੇ。 |
| property | ਐਪਲੀਕੇਸ਼ਨ ਪਰਿਵਰਤਨ ਦੇ ਪ੍ਰਭਾਵ ਵਾਲੇ CSS ਗੁਣ ਦੇ ਨਾਮ ਦੀ ਸੂਚੀ ਦੇਣਾ ਹੈ ਜੋ ਕਿ ਕਮਾ ਨਾਲ ਵੰਡਿਆ ਹੋਇਆ ਹੈ。 |
ਤਕਨੀਕੀ ਵੇਰਵੇ
| ਮੂਲਤਬੀ ਮੁੱਲ: | all |
|---|---|
| ਇਨਹੈਰਿਟੈਂਸੀ: | no |
| ਵਰਜਨ: | CSS3 |
| JavaScript ਗਰੈਮੇਟਰਸਿਜ਼: | object.style.transitionProperty="width,height" |
ਬਰਾਊਜ਼ਰ ਸਮਰੱਥਾ
ਸਰਵੇਖਣ ਤੇਲ ਵਿੱਚ ਦਿਖਾਏ ਗਏ ਨੰਬਰ ਇਸ ਗੁਣ ਦੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰੱਥ ਪਹਿਲੀ ਬਰਾਊਜ਼ਰ ਵਰਜਨ ਨੂੰ ਨੋਟ ਕਰਦੇ ਹਨ。
ਦੇ ਸ਼ੁਰੂ ਦੀ ਆਡਰੈਸ਼ਨ ਨਾਲ -webkit-,-moz- ਜਾਂ -o- ਦੇ ਨਾਮ ਦੇ ਨਾਲ ਨੰਬਰ ਵਰਤੋਂ ਕਰਨਾ ਹੈ。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
- ਪਿਛਲਾ ਪੰਨਾ transition-duration
- ਅਗਲਾ ਪੰਨਾ transition-timing-function
