ਔਨਲਾਈਨ ਟੂਲ CSS3 ਐਨੀਮੇਸ਼ਨ ਜੇਨਰੇਟਰ

Animation

ਆਲਸੀ ਲੋਕਾਂ ਲਈ CSS ਐਨੀਮੇਸ਼ਨ ਜਨਰੇਟਰ।

CSS ਐਨੀਮੇਸ਼ਨ

CSS JavaScript ਜਾਂ ਫਲੈਸ਼ ਦੀ ਵਰਤੋਂ ਕੀਤੇ ਬਿਨਾਂ HTML ਤੱਤਾਂ ਦੇ ਐਨੀਮੇਸ਼ਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ

ਇਸ ਅਧਿਆਇ ਵਿੱਚ ਤੁਸੀਂ ਹੇਠਾਂ ਦਿੱਤੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਬਾਰੇ ਸਿੱਖੋਗੇ:

  • @keyframes
  • ਐਨੀਮੇਸ਼ਨ-ਨਾਮ
  • ਐਨੀਮੇਸ਼ਨ-ਅਵਧੀ
  • ਐਨੀਮੇਸ਼ਨ-ਦੇਰੀ
  • ਐਨੀਮੇਸ਼ਨ-ਦੁਹਰਾਓ-ਗਿਣਤੀ
  • ਐਨੀਮੇਸ਼ਨ-ਦਿਸ਼ਾ
  • ਐਨੀਮੇਸ਼ਨ-ਟਾਈਮਿੰਗ-ਫੰਕਸ਼ਨ
  • ਐਨੀਮੇਸ਼ਨ-ਫਿਲ-ਮੋਡ
  • ਐਨੀਮੇਸ਼ਨ

ਬ੍ਰਾਊਜ਼ਰ ਖਾਸ ਅਗੇਤਰ

ਐਨੀਮੇਸ਼ਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸਮਝਣ ਲਈ ਕੁਝ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਖਾਸ ਅਗੇਤਰ (-webkit-) ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ

 

CSS ਐਨੀਮੇਸ਼ਨ ਕੀ ਹਨ?

ਇੱਕ ਐਨੀਮੇਸ਼ਨ ਇੱਕ ਤੱਤ ਨੂੰ ਹੌਲੀ ਹੌਲੀ ਇੱਕ ਸ਼ੈਲੀ ਤੋਂ ਦੂਜੀ ਵਿੱਚ ਬਦਲਣ ਦਿੰਦਾ ਹੈ।

ਤੁਸੀਂ ਜਿੰਨੇ ਵੀ CSS ਸੰਪਤੀਆਂ ਨੂੰ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ, ਜਿੰਨੀ ਵਾਰ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਬਦਲ ਸਕਦੇ ਹੋ।

CSS ਐਨੀਮੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ ਐਨੀਮੇਸ਼ਨ ਲਈ ਕੁਝ ਕੀਫ੍ਰੇਮ ਨਿਰਧਾਰਤ ਕਰਨੇ ਚਾਹੀਦੇ ਹਨ।

ਕੀਫ੍ਰੇਮ ਵਿੱਚ ਕੁਝ ਸਮੇਂ 'ਤੇ ਤੱਤ ਦੀਆਂ ਸ਼ੈਲੀਆਂ ਹੋਣਗੀਆਂ।

 

@keyframes ਨਿਯਮ

ਜਦੋਂ ਤੁਸੀਂ @keyframes ਨਿਯਮ ਦੇ ਅੰਦਰ CSS ਸਟਾਈਲ ਨਿਸ਼ਚਿਤ ਕਰਦੇ ਹੋ, ਤਾਂ ਐਨੀਮੇਸ਼ਨ ਹੌਲੀ-ਹੌਲੀ ਕੁਝ ਸਮੇਂ 'ਤੇ ਮੌਜੂਦਾ ਸ਼ੈਲੀ ਤੋਂ ਨਵੀਂ ਸ਼ੈਲੀ ਵਿੱਚ ਬਦਲ ਜਾਵੇਗੀ।