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)
విలువ వివరణ
n అవసరమైనది. స్టేప్స్/అంతరాల నిర్ణయించండి.
step-position

ఎంపికాత్మకం. విలువల మధ్య జంప్లను జరుగుతున్న సమయాన్ని నిర్ణయించండి. ఈ కీలకాంశాలలో ఒకటిని ఉపయోగించండి:

  • jump-start లేదా start: అనిమేషన్ ప్రారంభమైనప్పుడు మొదటి పద్ధతి జరుగుతుంది
  • jump-end లేదా end: అనిమేషన్ ముగిసినప్పుడు చివరి పద్ధతి జరుగుతుంది. end అప్రమేయం
  • jump-none: ముందస్తు లేదా ఆలస్యం కలిగిన జంప్లను జరుగుతుంది లేదు
  • jump-both: ముందస్తు మరియు ఆలస్యం కలిగిన జంప్లను సమయంలో జరుగుతాయి

సాంకేతిక వివరాలు

సంచిక: CSS Easing Functions Level 1

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ ఫంక్షన్ ను పూర్తిగా మద్దతు ఇస్తున్న పరిశీలక స్రాంశం సంచికను సూచిస్తాయి。

Chrome Edge Firefox Safari Opera
77 79 65 14 64

相关页面

పరికల్పన:CSS animation అట్రిబ్యూట్

పరికల్పన:CSS animation-timing-function అట్రిబ్యూట్