iPadでCSS opacity animationが動作しない

特定のiPad（iPadOS12.4.1(16G102)）のSafariとChromeで、opacityを使ったフェードインCSS animationが動作してくれなかった。なんでかなと調べたら、初期化用opacityは0/1、keyframes側では0%,100%を使用、と単位が違っていたからのようだ。

@keyframes fadeIn{
    0%  {opacity: 0%;}
    100%{opacity: 100%;}
}
.fade-in-element {
    opacity: 0; /* 単位が%でない！ */
    animation: fadeIn 1s;
}

単位を％で統一するか、逆に0／1で統一するとちゃんと動作した。
より新しいバージョンのiPhoneやWindowsでは単位が違っていても解釈してくれていたようだ。
念の為メモ。

opacity – CSS: カスケーディングスタイルシート | MDN

によれば、opacityプロパティの取りうる値は<alpha-value>、
0.0以上1.0以下の<number>か、0％～100％の<percentage>となっている。
古いバージョンではこれが混在すると別プロパティとして取り扱われてしまっていたのかもしれない。