{% for animation in animations %}
  .{{ animation.css_class }} {
    animation: {{ animation.css_class }} {{ animation.time_seconds }}s steps(1, start) infinite;
    background-size: 100%;
    background-image: url("{{ animation.url }}");
  }

  @keyframes {{ animation.css_class }} {
    {% for frame in animation.frames %}
      {{ frame.start_percent }}%, {{ frame.end_percent }}% { background-position-y: {{ -100 * frame.index }}% }
    {% endfor %}
  }
{% endfor %}
