Android 2.3に対応した、css onlyなdelay付きanimation-fill-modeのpolyfillの作り方

いい感じでCSSでフェードインするアニメ作りたいとするやろ？

// vender prefixは省略
.hoge {
    animation: fadein 1s;
    animation-fill-mode: forwards;
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

transitionでやらない、jsを使わないという条件の元だと、たぶんこう書く。でもこれだとAndroid 2.3で上手く動作しない。なぜかと言うと、animation-fill-modeをサポートしていないから（アニメーション終了直後にopacity: 0の状態に戻ってしまう）。

そこで最初から.hoge { opacity: 1; }と記述しておくというハックがある。しかし、これはanimation-delayがなければ上手くいくが、animation-delayを設けると開始からdelayの間だけopacity: 1の状態が持続してしまい、フェードインではなくなってしまう。

そこで、animation-delayと同じ効果の「opacity: 0の状態で何も行わないアニメーション」を定義して、本命のアニメーションとチェインさせると上手くいく。

.hoge {
    opacity: 1;
    animation: wait 0.5s, fadein 1s 0.5s;
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes wait {
    from { opacity: 0; }
    to { opacity: 0; }
}

まあこんなことをやる前に、プロダクトオーナーにAndroid 2.xのシェアを見せて、「これらを獲得するためには、我々の労力が確実に1.1倍必要になりますが、大丈夫ですか？人件費1.1倍ですよ、いいんですか？？？」という確認、というかサポートを諦めさせる方向での交渉をする必要がある。