Set CSS3 animation delay explicitly for Safari (mobile)

I just got into the situation where the animation property defined at W3C didn't work for me on Safari mobile. The following code should make a fade effect between three images. It's an excerpt of our code basis written in SCSS with help of Compass.

.some-container {
    $animation_duration: 21s;
    $animation_average: $animation_duration / 3;

    &:nth-child(1) {
      @include animation(crossfade_animation $animation_duration 0s infinite);
    }
    &:nth-child(2) {
      @include animation(crossfade_animation $animation_duration $animation_average infinite);
    }
    &:nth-child(3) {
      @include animation(crossfade_animation $animation_duration $animation_average * 2 infinite);
    }
}

@include keyframes(crossfade_animation) {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  33.3333% {
    opacity: 1;
  }
  35.3333% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

In Safari mobile, the total animation duration was used as delay which lead to blank screens during the animation. I had to define the delay explicitly in order to get it to work. Obviously the order of the second units isn't interpreted properly.

This works perfectly:

.some-container {
    $animation_duration: 21s;
    $animation_average: $animation_duration / 3;

    &:nth-child(1) {
      @include animation(crossfade_animation $animation_duration infinite);
      @include animation-delay(0s);
    }
    &:nth-child(2) {
      @include animation(crossfade_animation $animation_duration infinite);
      @include animation-delay($animation_average);
    }
    &:nth-child(3) {
      @include animation(crossfade_animation $animation_duration infinite);
      @include animation-delay($animation_average * 2);
    }
}