Before using animation in skins, you should describe it in animation section. In your skin you can use as many animated elements as you want, and choose any names for them. Please refer to the example below:

...
  <skin>
    <animation name="anim1">
        <render image="frame0.jpg"/>
        <render image="frame1.jpg"/>
        <render image="frame2.jpg"/>
        <sequence name="on_Start">
          <frame render="0"/>
          <frame render="1"/>
          <frame render="2"/>
          <frame render="1"/>
          <frame render="0"/>
        </sequence>
    </animation>
    <paint animation="anim1"/>
  </skin>
...

The first step is defining the render states (please refer to render sections).
In the example above, the animation contains 3 render states, that use 3 images - "frame0.jpg", "frame1.jpg" and "frame2.jpg".
Render states are automatically enumerated, starting from the zero index.
If the animation frames are assembled into one picture, you should use "u" and "v" attributes to set the offset point in the texture:

...
  <skin>
    <animation name="anim1">
        <render image="button.jpg" u="0" v="0"/>
        <render image="button.jpg" u="0" v="64"/>
        <render image="button.jpg" u="0" v="128"/>
        <sequence name="on_Start">
          <frame render="0"/>
          <frame render="1"/>
          <frame render="2"/>
          <frame render="1"/>
          <frame render="0"/>
        </sequence>
    </animation>
    <paint animation="anim1"/>
  </skin>
...

The next step is defining the frames sequences (see sequence and frame sections).
Each frame corresponds to a certain render state by its index.
Sequences names are depended from the widget implementation.
Be careful - if you make a mistake in the name, a widget can never start your sequence.
In the example above, there is only one sequence - "on_Start". It includes 5 frames.
As a result, you'll see the following sequence of render states: 0, 1, 2 ,1 ,0.
The animation speed is controlled by "fps" attribute (frames per second) for each frame.
If you skip this attribute, fps will be equal to "30" by default:

...
    <sequence name="on_Start">
      <frame render="0" fps="15"/>
      <frame render="1" fps="20"/>
      <frame render="2" fps="25"/>
      <frame render="1" fps="0.1"/>
      <frame render="0"/>
    </sequence>
...

Some widgets use animation to show their percent indicators (for example some process progress - loading, infill level, etc.). In this case, instead of sequence section, indicator section is used:

...
    <animation name="indicator1">
        <render image="img1.jpg"/>
        <render image="img2.jpg"/>
        <render image="img3.jpg"/>
        <render image="img4.jpg"/>
        <indicator name="progress"/>
    </animation>
...