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);
 }
}