CSS steps() ਫੰਕਸ਼ਨ

ਵਿਵਰਣ ਅਤੇ ਵਰਤੋਂ

CSS ਦਾ steps() ਫੰਕਸ਼ਨ ਏਨੀਮੇਸ਼ਨ ਲਈ ਸਟੇਪ ਟਾਈਮਿੰਗ ਫੰਕਸ਼ਨਾਂ ਬਣਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

ਇਹ ਫੰਕਸ਼ਨ ਏਨੀਮੇਸ਼ਨ ਦੀ ਮਿਆਦ ਨੂੰ ਨਿਰਧਾਰਿਤ ਨੰਬਰ (n) ਦੇ ਸਮਾਨ ਲੰਬਾਈ ਦੇ ਅੰਤਰਾਂ ਵਿੱਚ ਵੰਡਦਾ ਹੈ।ਉਦਾਹਰਣ ਵਜੋਂ: ਜੇਕਰ n 4 ਹੈ ਤਾਂ ਏਨੀਮੇਸ਼ਨ 4 ਹਿੱਸਿਆਂ ਵਿੱਚ ਵੰਡਿਆ ਜਾਵੇਗਾ।ਇਹ 0% ਤੋਂ 100% ਦੇ ਮਿਆਦ ਨੂੰ 4 ਹਿੱਸਿਆਂ ਵਿੱਚ ਵੰਡੇਗਾ; ਜਿਵੇਂ ਕਿ 0%-25%、25%-50%、50%-75% ਅਤੇ 75%-100%。

ਇੰਸਟੈਂਸੇ

ਏਨੀਮੇਸ਼ਨ ਲਈ ਵੱਖ-ਵੱਖ ਸਟੇਪ ਟਾਈਮਿੰਗ ਫੰਕਸ਼ਨਾਂ ਬਣਾਓ:

div.a {
  animation: mymove 5s steps(4, end);
}
div.b {
  animation: mymove 5s steps(6, jump-start);
}
div.c {
  animation: mymove 5s steps(4, jump-none);
}
div.d {
  animation: mymove 5s steps(4, jump-both);
}

ਖੁਦ ਮੁਹਾਰਤ ਕਰੋ

CSS ਗਰੇਮੇਟਿਕਸ

steps(n, step-position)

ਤਕਨੀਕੀ ਵੇਰਵੇ

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

ਸਾਰੇ ਫੰਕਸ਼ਨਾਂ ਦੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਪਹਿਲੇ ਬਰਾਉਜ਼ਰ ਵਰਜਨ ਦੇ ਸੰਖਿਆ ਪ੍ਰਤੀ ਸਾਰੇ ਟੇਬਲ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ。

相关页面

参考：سی ایس ایس آنیمیشن اپنائیتی

参考：سی ایس ایس آنیمیشن ٹائمننگ فنکشن اپنائیتی