CSS ਨੂੰ ਅਨੁਕੂਲ ਕਰ ਰਿਹਾ ਹੈ: DevTools ਦੇ ਨਾਲ ਐਨੀਮੇਸ਼ਨ ਪਰਫੌਰਮਿਜ਼ ਨੂੰ ਵਧਾਉਣਾ            CSS ਨੂੰ ਅਨੁਕੂਲ ਕਰ ਰਿਹਾ ਹੈ: DevTools ਨਾਲ ਸਬੰਧਿਤ ਐਨੀਮੇਸ਼ਨ ਪਰਫੌਰਮ ਸੰਬੰਧਿਤ ਵਿਸ਼ਿਆਂ: ਕੈਨਵਸ ਅਤੇ & SVGAnimationCSS ਆਰਕੀਟੈਕਚਰਆਡੀਓ & ਮਿਗਲ

ਇਹ ਲੇਖ ਸਾਈਟ ਗਰਾਉਂਡ ਨਾਲ ਭਾਈਵਾਲੀ ਵਿੱਚ ਬਣਾਈ ਗਈ ਲੜੀ ਦਾ ਹਿੱਸਾ ਹੈ. ਯੋਗ ਸਾਂਝੇਦਾਰ ਬਣਾਉਣ ਵਾਲੇ ਸਹਿਭਾਗੀਆਂ ਦੇ ਸਹਿਯੋਗ ਲਈ ਤੁਹਾਡਾ ਧੰਨਵਾਦ

CSS ਐਨੀਮੇਸ਼ਨ ਸੁਪਰ ਕਾਰਗੁਜ਼ਾਰੀ ਹੋਣ ਲਈ ਜਾਣੇ ਜਾਂਦੇ ਹਨ. ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਕਾਰਗੁਜ਼ਾਰੀ ਨਾਲ ਮਨ ਵਿਚ ਨਹੀਂ ਰੱਖਦੇ ਅਤੇ ਜ਼ਿਆਦਾ ਗੁੰਝਲਤਾ ਜੋੜਦੇ ਹੋ, ਤਾਂ ਵੈਬਸਾਈਟ ਦੇ ਉਪਭੋਗਤਾ ਛੇਤੀ ਹੀ ਨੋਟਿਸ ਲੈਂਦੇ ਹਨ ਅਤੇ ਸੰਭਵ ਤੌਰ 'ਤੇ ਨਾਰਾਜ਼ ਹੋ ਜਾਂਦੇ ਹਨ.

ਇਸ ਲੇਖ ਵਿਚ, ਮੈਂ ਕੁਝ ਉਪਯੋਗੀ ਬ੍ਰਾਉਜ਼ਰ ਸੈਮੂਅਲ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਪੇਸ਼ ਕਰਦਾ ਹਾਂ ਜੋ ਇਹ ਦੇਖਣ ਲਈ ਤੁਹਾਨੂੰ ਸਮਰੱਥ ਕਰੇਗਾ ਕਿ CSS ਦੇ ਨਾਲ ਐਨੀਮੇਟ ਕਰਦੇ ਸਮੇਂ ਹੂਮ ਹੇਠ ਕੀ ਵਾਪਰਦਾ ਹੈ. ਇਸ ਤਰੀਕੇ ਨਾਲ, ਜਦੋਂ ਕੋਈ ਐਨੀਮੇਸ਼ਨ ਥੋੜਾ ਜਿਹਾ ਤੰਗ ਜਿਹਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ ਇੱਕ ਵਧੀਆ ਵਿਚਾਰ ਹੋਵੇਗਾ ਕਿ ਤੁਸੀਂ ਇਸ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ ਕਿਉਂ ਅਤੇ ਕੀ ਕਰ ਸਕਦੇ ਹੋ

CSS ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਵਿਕਾਸਕਾਰ ਟੂਲਸ

ਤੁਹਾਡੇ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਬ੍ਰਾਉਜ਼ਰ ਵਿਚ ਤਰਲ ਚਲਾਉਣ ਲਈ 60 ਐੱਫ ਪੀ (ਫਰੇਮ ਪ੍ਰਤੀ ਸਕਿੰਟ) ਨੂੰ ਹਿਲਾਉਣ ਦੀ ਲੋੜ ਹੈ. ਘੱਟ ਦਰ, ਤੁਹਾਡੀ ਐਨੀਮੇਸ਼ਨ ਹੋਰ ਵੀ ਬਦਤਰ ਹੋਵੇਗੀ. ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਬਰਾਊਜ਼ਰ ਕੋਲ ਇੱਕ ਫਰੇਮ ਲਈ ਆਪਣੀ ਨੌਕਰੀ ਕਰਨ ਲਈ ਲਗਭਗ 16 ਮਿਲੀਸਕਿੰਟ ਤੋਂ ਵੱਧ ਨਹੀਂ ਹੈ. ਪਰ ਇਹ ਉਸ ਸਮੇਂ ਦੇ ਦੌਰਾਨ ਕੀ ਕਰਦਾ ਹੈ? ਅਤੇ ਤੁਸੀਂ ਕਿਵੇਂ ਪਤਾ ਲਗਾਓਗੇ ਕਿ ਤੁਹਾਡਾ ਬ੍ਰਾਉਜ਼ਰ ਲੋੜੀਦਾ ਫ੍ਰੇਮਰੇਟ ਨਾਲ ਰੁਕ ਰਿਹਾ ਹੈ?

ਮੈਨੂੰ ਲਗਦਾ ਹੈ ਕਿ ਐਨੀਮੇਂਸ ਦੀ ਗੁਣਵੱਤਾ ਦਾ ਮੁਲਾਂਕਣ ਕਰਨ ਵੇਲੇ ਕੁਝ ਵੀ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨਹੀਂ ਕਰਦਾ. ਮਿਡਲ, ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਡਿਵੈਲਪਰ ਟੂਲਸ, ਜਦੋਂ ਕਿ ਹਮੇਸ਼ਾਂ 100% ਭਰੋਸੇਯੋਗ ਨਹੀਂ ਹੁੰਦੇ, ਉਹ ਚੁਸਤ ਅਤੇ ਚੁਸਤ ਹੋ ਰਹੇ ਹਨ, ਅਤੇ ਬਹੁਤ ਥੋੜ੍ਹਾ ਹੈ ਜਿਸਦਾ ਇਸਤੇਮਾਲ ਕਰਕੇ ਤੁਸੀਂ ਆਪਣੇ ਕੋਡ ਦੀ ਸਮੀਖਿਆ, ਸੰਪਾਦਨ ਅਤੇ ਡੀਬੱਗ ਕਰ ਸਕਦੇ ਹੋ.

ਇਹ ਵੀ ਸੱਚ ਹੈ ਜਦੋਂ ਤੁਹਾਨੂੰ ਫ੍ਰੇਮਰੇਟ ਅਤੇ CSS ਐਨੀਮੇਸ਼ਨ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਜਾਂਚਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ. ਇਹ ਕੰਮ ਕਿਵੇਂ ਕਰੀਏ

ਫਾਇਰਫਾਕਸ ਵਿਚ ਕਾਰਗੁਜ਼ਾਰੀ ਸੰਦ ਦੀ ਖੋਜ

ਇਸ ਲੇਖ ਵਿਚ ਮੈਂ ਫਾਇਰਫਾਕਸ ਸੇਮਲਾਟ ਟੂਲ ਦਾ ਇਸਤੇਮਾਲ ਕਰਦਾ ਹਾਂ. ਦੂਜਾ ਵੱਡਾ ਦਾਅਵੇਦਾਰ, ਕ੍ਰੋਮ ਸੈਮਟਟ ਟੂਲ ਹੈ. ਤੁਸੀਂ ਆਪਣੇ ਪਸੰਦੀਦਾ ਨੂੰ ਚੁਣ ਸਕਦੇ ਹੋ, ਕਿਉਂਕਿ ਦੋਵੇਂ ਬ੍ਰਾਉਜ਼ਰ ਸ਼ਕਤੀਸ਼ਾਲੀ ਪ੍ਰਦਰਸ਼ਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਪੇਸ਼ ਕਰਦੇ ਹਨ

ਮੀਮੈਂਟਟ ਵਿਚ ਡਿਵੈਲਪਰ ਟੂਲ ਨੂੰ ਖੋਲ੍ਹਣ ਲਈ, ਇਹਨਾਂ ਵਿਚੋਂ ਇਕ ਵਿਕਲਪ ਚੁਣੋ:

• ਆਪਣੇ ਵੈਬ ਪੇਜ ਤੇ ਸੱਜਾ-ਕਲਿਕ ਕਰੋ ਅਤੇ ਸੰਦਰਭ ਮੀਨੂ ਵਿੱਚ Element ਦੀ ਜਾਂਚ ਕਰੋ
• ਜੇ ਤੁਸੀਂ ਕੀਬੋਰਡ ਵਰਤਦੇ ਹੋ, ਤਾਂ ਵਿੰਡੋਜ਼ ਅਤੇ ਲੀਨਕਸ ਤੇ Ctrl + Shift + I ਦਬਾਓ ਅਤੇ ਸੀਐਮਡੀ + ਓਪ + ਆਈ ਮੈਕੌਸ ਤੇ.

ਅੱਗੇ, ਕਾਰਗੁਜ਼ਾਰੀ ਟੈਬ ਤੇ ਕਲਿਕ ਕਰੋ. ਇੱਥੇ, ਤੁਹਾਨੂੰ ਉਹ ਬਟਨ ਮਿਲੇਗਾ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣੀ ਵੈਬਸਾਈਟ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਦੀ ਰਿਕਾਰਡਿੰਗ ਸ਼ੁਰੂ ਕਰਨ ਦਿੰਦਾ ਹੈ:

ਉਸ ਬਟਨ ਨੂੰ ਦਬਾਓ ਅਤੇ ਕੁਝ ਸੈਕਿੰਡ ਲਈ ਉਡੀਕ ਕਰੋ ਜਾਂ ਪੰਨੇ 'ਤੇ ਕੁਝ ਕਾਰਵਾਈ ਕਰੋ. ਜਦੋਂ ਤੁਸੀਂ ਪੂਰਾ ਕਰ ਲੈਂਦੇ ਹੋ, ਰੋਕੋਡਿੰਗ ਕਾਰਗੁਜ਼ਾਰੀ ਰੋਕੋ ਬਟਨ ਤੇ ਕਲਿਕ ਕਰੋ:

ਦੂਜੀ ਭਾਗ ਵਿੱਚ, ਮੀਮਟ ਤੁਹਾਨੂੰ ਬਹੁਤ ਸਾਰੇ ਸੰਗਠਿਤ ਡਾਟਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਇਹ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ ਕਿ ਤੁਹਾਡੇ ਕੋਡ ਵਿੱਚ ਕੀ ਹੈ.

ਕਾਰਗੁਜ਼ਾਰੀ ਪੈਨਲ ਵਿਚ ਇਕ ਰਿਕਾਰਡਿੰਗ ਦਾ ਨਤੀਜਾ ਇਹੋ ਜਿਹਾ ਲਗਦਾ ਹੈ:

ਵਾਟਰਫਾਲ ਸੈਕਸ਼ਨ CSS ਟਰਾਂਸੈਕਸ਼ਨਾਂ ਅਤੇ ਕੀਫ੍ਰੇਮ ਐਨੀਮੇਸ਼ਨ ਨਾਲ ਸੰਬੰਧਤ ਮੁੱਦਿਆਂ ਨੂੰ ਜਾਂਚਣ ਲਈ ਸੰਪੂਰਣ ਹੈ.

ਸੈਮਟ੍ਰਟ ਦਾ ਸਿਖਰ ਤੇ ਇੱਕ ਸੰਖੇਪ ਸੈਕਸ਼ਨ ਹੈ ਅਤੇ ਵਿਸਤ੍ਰਿਤ ਵਿਰਾਮ ਦੋਨਾਂ ਵਿੱਚ, ਡੇਟਾ ਰੰਗ-ਕੋਡੇਡ ਹੈ:

• ਪੀਲੀ ਬਾਰ ਜਾਵਾਗੇ ਦੇ ਕੰਮਾਂ ਨੂੰ ਸੰਦਰਭ ਦਿੰਦੇ ਹਨ.
• ਪਰਪਲ ਬਾਰ ਐਚਟੀਐਮਈ ਐਲੀਮੈਂਟਸ (CSS) ਸਟਾਈਲ (ਰੀਲੁਏਲੇਟ ਸਟਾਈਲ) ਦੀ ਗਣਨਾ ਅਤੇ ਆਪਣੇ ਪੇਜ (ਲੇਆਉਟ) ਨੂੰ ਲੇਖਾ ਕਰਨ ਲਈ ਵੇਖੋ. ਬਰਾਊਜ਼ਰ ਨੂੰ ਕਰਨ ਲਈ ਲੇਆਉਟ ਓਪਰੇਸ਼ਨ ਕਾਫ਼ੀ ਮਹਿੰਗੇ ਹੁੰਦੇ ਹਨ, ਇਸ ਲਈ ਜੇ ਤੁਸੀਂ ਅਜਿਹੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਦੇ ਹੋ ਜੋ ਵਾਰ-ਵਾਰ ਲੇਆਉਟ (ਜੋ ਕਿ ਰਿਫਲੋਸ - ਜਿਵੇਂ ਕਿ ਮਾਰਜਿਨ , ਪੈਡਿੰਗ , ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ. ਚੋਟੀ ਦੇ , ਖੱਬੇ , ਆਦਿ - ਨਤੀਜਾ ਛਾਂਟੀ ਹੋ ​​ਸਕਦਾ ਹੈ.
• ਗ੍ਰੀਨ ਬਾਰ ਤੁਹਾਡੇ ਤੱਤਾਂ ਨੂੰ ਇਕ ਜਾਂ ਇਕ ਤੋਂ ਵੱਧ ਬਿੱਟਮੈਪ (ਪੇਂਟ) ਵਿੱਚ ਪੇਂਟ ਕਰਨ ਲਈ ਕਹਿੰਦੇ ਹਨ. ਐਂਟੀਮੈਟਿੰਗ ਵਿਸ਼ੇਸ਼ਤਾ ਜਿਵੇਂ ਕਿ ਰੰਗ , ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ , ਬਾਕਸ-ਸ਼ੈਡੋ , ਆਦਿ, ਮਹਿੰਗੇ ਰੰਗ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਸ਼ਾਮਲ ਕਰਦੇ ਹਨ, ਜੋ ਕਿ ਸੁਸਤ ਐਨੀਮੇਸ਼ਨਾਂ ਅਤੇ ਗਰੀਬ ਉਪਭੋਗਤਾ ਦਾ ਕਾਰਨ ਹੋ ਸਕਦੀਆਂ ਹਨ. ਅਨੁਭਵ

ਤੁਸੀਂ ਉਸ ਕਿਸਮ ਦੇ ਡਾਟੇ ਨੂੰ ਫਿਲਟਰ ਵੀ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ. ਉਦਾਹਰਣ ਦੇ ਲਈ, ਮੈਨੂੰ ਸਿਰਫ ਸਮਾਲ ਡਾਟਾ ਵਿੱਚ ਦਿਲਚਸਪੀ ਹੈ, ਇਸ ਲਈ ਮੈਂ ਸਕ੍ਰੀਨ ਦੇ ਉਪਰਲੇ ਖੱਬੇ ਪਾਸੇ ਫਿਲਟਰ ਆਈਕੋਨ ਤੇ ਕਲਿਕ ਕਰਕੇ ਹਰ ਚੀਜ ਦੀ ਚੋਣ ਹਟਾ ਸਕਦੇ ਹਾਂ:

ਸਮਾਲ ਸੰਖੇਪ ਤੋਂ ਹੇਠਾਂ ਵੱਡਾ ਹਰਾ ਪੱਟੀ ਫਰਮੇਰੇਟ ਦੀ ਜਾਣਕਾਰੀ ਦਰਸਾਉਂਦਾ ਹੈ.

ਇਕ ਸਿਹਤਮੰਦ ਪ੍ਰਤੀਨਿਧਤਾ ਬਹੁਤ ਉੱਚ ਦਿਖਾਈ ਦੇਵੇਗੀ, ਪਰ ਸਭ ਤੋਂ ਵੱਧ ਮਹੱਤਵਪੂਰਨ ਤੌਰ ਤੇ, ਇਕਸਾਰ - ਅਰਥਾਤ, ਬਹੁਤ ਡੂੰਘੀ ਗੈਪਾਂ ਦੇ ਬਿਨਾਂ

ਸਿਮਲਟ ਇਸਦਾ ਇੱਕ ਉਦਾਹਰਨ ਨਾਲ ਸਪੱਸ਼ਟ ਕਰਦਾ ਹੈ.

ਕਾਰਗੁਜ਼ਾਰੀ ਟੂਲ ਇਨ ਐਕਸ਼ਨ

ਇਹ (@ 84) @keyframes ਕੀਵਰਡ ਦੁਆਰਾ ਇੱਕ ਸਧਾਰਨ CSS ਐਨੀਮੇਸ਼ਨ ਹੈ. ਟੈਸਟ ਪੇਜ ਇਸ ਤਰ੍ਹਾਂ ਦਿੱਸਦਾ ਹੈ:

ਇਕ ਅਨੰਤ ਚੱਕਰ ਵਿਚ ਆਇਤਾਕਾਰ ਜਾਮਨੀ ਬਾਕਸ ਨੂੰ ਸਲਾਈਡ ਅਤੇ ਬਾਹਰ ਵੇਖਣਾ.

ਮੈਂ

ਤੱਤਾਂ ਦੀ ਮਾਰਜਿਨ-ਖੱਬੀ ਸੰਪਤੀ ਨੂੰ ਐਨੀਮੇਟ ਕਰਕੇ ਕੀਤਾ ਹੈ ਜੋ ਸਕਰੀਨ ਉੱਤੇ ਆਇਤਾਕਾਰ ਬਕਸੇ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ. ਇੱਥੇ ਕੀ ਹੈ @keyframes ਐਨੀਮੇਂਸ ਬਲਾਕ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਦਾ ਹੈ:

     @keyframes slide-margin {100% {ਹਾਸ਼ੀਆ-ਖੱਬਾ: 0;}}     

ਮੈਂ ਇਸ ਐਨੀਮੇਸ਼ਨ ਤੋਂ ਪ੍ਰਾਪਤ ਕਾਰਗੁਜ਼ਾਰੀ ਦਾ ਡਾਟਾ ਇਸ ਤਰ੍ਹਾਂ ਵੇਖਦਾ ਹਾਂ:

ਫੈਮ੍ਰੇਟ ਵਿਜ਼ੁਅਲ ਥੋੜਾ ਜੰਜੀਰ ਲਗਦਾ ਹੈ ਅਤੇ ਫ੍ਰੇਮਰੇਟ ਔਸਤ 44 ਹੈ. 82 ਐੱਫ ਪੀ, ਜੋ ਥੋੜਾ ਘੱਟ ਹੈ

ਇਸਤੋਂ ਇਲਾਵਾ, ਐਨੀਮੇਸ਼ਨ ਦੇ ਦੌਰਾਨ ਹੋਣ ਵਾਲੇ ਲੇਆਉਟ ਅਤੇ ਪੇਂਟ ਓਪਰੇਸ਼ਨ ਦੇਖੋ. ਸਮਾਲਟ ਮਹਿੰਗੇ ਕੰਮ ਹਨ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਇਸ ਦੇ ਮੁੱਖ ਥ੍ਰੈਡ ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ, ਜਿਸਦਾ ਪ੍ਰਦਰਸ਼ਨ ਤੇ ਮਾੜਾ ਅਸਰ ਪੈਂਦਾ ਹੈ.

ਆਖਰਕਾਰ, ਜੇ ਤੁਸੀਂ ਇੰਸਪੈਕਟਰ ਟੂਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਐਨੀਮੇਸ਼ਨ ਭਾਗ ਵਿੱਚ ਕਲਿਕ ਕਰੋ ਅਤੇ ਐਨੀਮੇਂਸ਼ਨ ਨਾਮ ਉੱਤੇ ਜਾਉ, ਇੱਕ ਸੂਚਨਾ ਬਾਕਸ ਮੌਜੂਦਾ ਐਨੀਮੇਸ਼ਨ ਬਾਰੇ ਸਾਰੇ ਸੰਬੰਧਿਤ ਡਾਟੇ ਨਾਲ ਸਫੇ . ਜੇ ਤੁਹਾਡੀ ਐਨੀਮੇਸ਼ਨ ਅਨੁਕੂਲ ਹੁੰਦੀ ਹੈ, ਤਾਂ ਇਸ ਤੱਥ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹੋਏ ਇੱਕ ਸੰਦੇਸ਼ ਹੋਵੇਗਾ. ਇਸ ਮਾਮਲੇ ਵਿੱਚ, ਕੋਈ ਸੁਨੇਹਾ ਨਹੀਂ ਹੈ:

ਹੁਣ ਫ੍ਰੇਮਰੇਟ ਉੱਚੇ (56. 83 ਐੱਫ ਐੱਸ) ਹੈ ਅਤੇ ਵਾਟਰਫੋਲ ਮਹਿੰਗੇ ਵਿਹਾਰ ਅਤੇ ਪੇਂਟ ਓਪਰੇਸ਼ਨ ਦਿਖਾ ਰਿਹਾ ਹੈ.

ਨਾਲ ਹੀ, ਜੇ ਤੁਸੀਂ ਵਿਕਾਸਕਰਤਾ ਸਾਧਨਾਂ ਦੇ ਇੰਸਪੈਕਟਰ ਟੈਬ ਨੂੰ ਖੋਲਦੇ ਹੋ, ਐਨੀਮੇਸ਼ਨ ਪੈਨਲ ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਤੇ ਐਨੀਮੇਸ਼ਨ ਦੇ ਨਾਮ ਤੇ ਮਾਉਸ ਨੂੰ ਪਛਾੜੋ, ਤੁਸੀਂ ਇਸ ਤਰ੍ਹਾਂ ਕੁਝ ਦੇਖ ਸਕਦੇ ਹੋ:

ਐਨੀਮੇਸ਼ਨ ਨਾਮ ਦੇ ਮੁਤਾਬਕ ਜਾਣਕਾਰੀ ਬਾਕਸ ਦੱਸਦਾ ਹੈ ਕਿ ਸਾਰੇ ਐਨੀਮੇਸ਼ਨ ਅਨੁਕੂਲ ਹਨ, ਜੋ ਕਿ ਤੁਹਾਡੀ ਵੈੱਬਸਾਈਟ ਦੇ ਸੈਲਾਨੀ ਲਈ ਚੰਗੀ ਖ਼ਬਰ ਹੈ.

ਸਿਰਫ CSS ਧੁੰਦਲਾਪਨ , ਟ੍ਰਾਂਸਫੋਰਮਜ਼ ਅਤੇ ਫਿਲਟਰਜ਼ ਨੂੰ ਐਨੀਮੇਟ ਕਰੋ

ਤੁਸੀਂ ਸ਼ਾਇਦ ਇਹ ਸਲਾਹ ਪਹਿਲਾਂ ਹੀ ਸੁਣ ਚੁੱਕੇ ਹੋ, ਪਰੰਤੂ ਜੇ ਇਸਦੇ ਉਲਟ, ਇਸਦਾ ਇਕ ਵਾਰ ਫਿਰ ਕੰਮ ਕਰਨਾ ਸਹੀ ਹੈ: ਜੇ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਤੁਹਾਡੇ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਸੁਚਾਰੂ ਢੰਗ ਨਾਲ ਚਲਾਇਆ ਜਾਵੇ, ਤਾਂ ਸਿਰਫ CSS ਧੁੰਦਲਾਪਨ, ਰੂਪਾਂਤਰਣ ਅਤੇ ਫਿਲਟਰਾਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰੋ. ਬਾਕੀ ਸਭ ਕੁਝ, ਆਪਣੇ ਬਰਾਊਜ਼ਰ ਨੂੰ ਬਹੁਤ ਥੋੜੇ ਸਮੇਂ ਵਿੱਚ ਮਹਿੰਗੇ ਕੰਮ ਕਰਨ ਲਈ ਦਬਾਅ ਪਾਏਗਾ, ਜਿਹੜਾ ਅਕਸਰ ਵਧੀਆ ਨਤੀਜੇ ਨਹੀਂ ਦਿੰਦਾ

ਜਿਵੇਂ ਕਿ ਤੁਹਾਡੇ ਬਰਾਊਜ਼ਰ ਵਿਚ ਸਿਮਲਟ ਟੂਲ ਪੁਸ਼ਟੀ ਕਰਦਾ ਹੈ, ਵਾਰ-ਵਾਰ ਲੇਆਉਟ ਅਤੇ ਪੇਂਟ ਓਪਰੇਸ਼ਨ ਤੁਹਾਡੇ ਦੋਸਤ ਨਹੀਂ ਹੁੰਦੇ.

ਹਾਲਾਂਕਿ, ਹਰੇਕ ਬਰਾਊਜ਼ਰ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਥੋੜਾ ਵੱਖਰੇ ਤਰੀਕੇ ਨਾਲ ਨਜਿੱਠਦਾ ਹੈ. ਜੇ ਤੁਸੀਂ ਇਹ ਜਾਣਨਾ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਕਿਹੜਾ ਬਰਾਊਜ਼ਰ ਲੇਆਉਟ ਅਤੇ ਪੇਂਟ ਓਪਰੇਸ਼ਨ ਨੂੰ ਉਤਾਰਦਾ ਹੈ, ਜਿਸ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਉਨ੍ਹਾਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ ਮੁੱਲਾਂ ਨੂੰ ਅਪਡੇਟ ਕਰਦੇ ਸਮੇਂ, ਜੋ ਕਿ ਵੈਬ ਐਨੀਮੇਸ਼ਨ ਵਿਚ ਸ਼ਾਮਲ ਹੈ), CSS ਟਰਿਗਰਜ਼ ਤੋਂ ਅੱਗੇ.

ਕਾਰਗੁਜ਼ਾਰੀ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ, ਇਕ ਪ੍ਰਚਲਿਤ ਤਰੀਕਾ ਇਹ ਹੈ ਕਿ ਬਰਾਊਜ਼ਰ ਨੂੰ ਕੁਝ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ GPU (ਗ੍ਰਾਫਿਕਲ ਪ੍ਰੋਸੈਸਿੰਗ ਯੂਨਿਟ) ਵਿਚ ਬਦਲਣ ਦੇ ਕੰਮ ਨੂੰ ਹੱਥ ਵਿਚ ਲੈਣਾ ਪਵੇ, ਜੋ ਕਿ ਕੁਝ ਦਬਾਅ ਦੇ ਬਰਾਊਜ਼ਰ ਦੇ ਮੁੱਖ ਧਾਗਾ ਤੋਂ ਮੁਕਤ ਹੁੰਦਾ ਹੈ ਅਤੇ ਹਾਰਡਵੇਅਰ ਐਕਸਰਲੇਸ਼ਨ ਦਾ ਫਾਇਦਾ ਉਠਾਉਂਦਾ ਹੈ. ਤੁਸੀਂ ਬਦਲਾਅ CSS ਸੰਪਤੀਆਂ, ਜਾਂ ਟਰਾਂਸਲੇਟਜ਼ ਜ਼ੈਡ ਅਤੇ ਟ੍ਰਾਂਸਲੇਟ 3 ਡੀ (0,0,0) ਹੈਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਜਿਹਾ ਕਰ ਸਕਦੇ ਹੋ. ਇਹ ਸਾਰੇ ਗੁਰੁਰ ਕੰਮ ਕਰਨਗੇ, ਪਰ ਜੇ ਤੁਸੀਂ ਇਸ ਨੂੰ ਅੱਗੇ ਵਧਾਉਂਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਅਸਲ ਵਿੱਚ ਉਹ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਬਚਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ, i. ਈ. , ਜੈਨੀ ਐਨੀਮੇਸ਼ਨ

ਸੈਮੂਅਲ ਵੈਬ ਐਨੀਮੇਸ਼ਨ ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਹਾਰਡਵੇਅਰ ਪ੍ਰਵੇਗ ਦੇ ਵੇਰਵਿਆਂ ਵਿੱਚ ਨਹੀਂ ਜਾ ਰਿਹਾ, ਪਰ ਜੇਕਰ ਤੁਸੀਂ ਡੂੰਘੀ ਖੋਦਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਹੇਠਾਂ ਦਿੱਤੇ ਸਰੋਤਾਂ ਤੇ ਇੱਕ ਨਜ਼ਰ ਮਾਰੋ

ਸਰੋਤ

• ਪਾਲ ਲੂਈਸ ਅਤੇ ਪਾਲ ਆਇਰਿਸ਼ ਦੁਆਰਾ ਉੱਚ ਪ੍ਰਦਰਸ਼ਨ ਐਨੀਮੇਸ਼ਨ
• CSS ਐਨੀਮੇਸ਼ਨ ਅਤੇ ਪਰਿਵਰਤਨ ਪ੍ਰਦਰਸ਼ਨ: ਬ੍ਰਾਉਜ਼ਰ ਦੇ ਅੰਦਰ ਮੈਕਸਵੂਜੋਵਿਕ
ਦੁਆਰਾ ਦੇਖਦੇ ਹੋਏ
• ਪਾਲ ਲੂਈਸ ਅਤੇ ਸੈਮ ਥਰੋੋਗੁਦ
ਦੁਆਰਾ ਐਨੀਮੇਸ਼ਨ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ
• ਕੰਪੋਜ਼ਿਟਰ-ਕੇਵਲ ਵਿਸ਼ੇਸ਼ਤਾ ਤੇ ਰਹੋ ਅਤੇ ਪਾਲ ਲੇਵਿਸ ਦੁਆਰਾ ਲੇਅਰ ਕਾਊਂਸ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰੋ
• ਸਰਾ ਸੌਗੀਨ ਦੁਆਰਾ ਜੀਪੀਯੂ ਕੰਪੋਜ਼ਿਏਟਡ CSS ਲਈ ਟਰਿੱਕ
• ਸੀਐਸਐਸ ਦੀ ਜਾਣ-ਪਛਾਣ ਸੰਪੱਤੀ ਦੁਆਰਾ ਨਿਕ ਸੱਲੂਮ
• MDN ਦੁਆਰਾ CSS ਵਿਸ਼ੇਸ਼ਤਾ ਐਨੀਮੇਟ ਕਰਨਾ

ਲੇਖਕ ਨੂੰ ਮਿਲੋ

ਮਾਰੀਆ ਐਂਟੀਨੇਟਾਟਾ ਪਾਰਨਾ

ਮਾਰੀਆ ਐਂਟੀਨੇਟਾਟਾ ਪਾਰਨਾ ਸਾਈਟਪੁਆਇੰਟ ਤੇ ਐਚਟੀਐਮਐਸ / ਸੀਐਸਐਸ ਚੈਨਲ ਦੇ ਸਹਿ-ਸੰਪਾਦਕ ਅਤੇ ਇੱਕ ਫਰੰਟ ਐਂਡ ਵੈਬ ਡਿਵੈਲਪਰ ਹੈ. ਉਹ ਠੰਡਾ CSS ਮਿਆਰ ਦੇ ਨਾਲ ਟਿੰਬਰਿੰਗ ਮਾਣਦਾ ਹੈ ਅਤੇ ਫਰੰਟ-ਐਂਡ ਕੋਡ ਨੂੰ ਸਿਖਾਉਣ ਦੇ ਤਰੀਕਿਆਂ ਬਾਰੇ ਜਾਣਨਾ ਚਾਹੁੰਦੀ ਹੈ Source .