css_animation_timing_function_steps.svg

Enable keyboard shortcuts

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="150">

  <style>

  @keyframes translate {

    0% {transform: translate(0, 0);}

    49% {transform: translate(340px, 0);}

    100% {transform: translate(0, 0);}

  #stepsEnd {

  animation-duration: 1s;

  animation-name: translate;

  animation-iteration-count: infinite;

  animation-timing-function: step-end;

  #stepsStart {

  animation-duration: 1s;

  animation-name: translate;

  animation-iteration-count: infinite;

  animation-timing-function: step-start;

  </style>

  <defs>

    <circle id="dot" r="15" fill="orange" stroke="grey" stroke-width="3"/>

  </defs>

  <use id="stepsEnd" href="#dot" x="30" y="20"/>

  <use id="stepsStart" href="#dot" x="30" y="70"/>

</svg>