iPhoneでjavascriptのanimate関数が動かない

ボタンをクリックすると、ボタンが消えて要素が表示されるjavascriptを作ったのですが、iPhoneで、ボタンをクリックしても動作していません。
クリックイベント自体は動いていることは確認できたのですが、その後の要素をanimateで消したり表示したりする箇所が動いていない様子です。

iOSのコンソールでは
TypeError: this.animate is not a function.
と表示されているので、animate関数が対応していないのかな？と思いましたが実際どうなんでしょうか？
また、対応していない場合、スマートフォンでアニメーションさせる関数は別にあるのでしょうか？

HTML
1<div class="trigger">
2    <a href="javascript:void(0)" data-trigger="simulationToggle">Triggerです</a>
3</div>
4<div class="target" data-target="simulationToggle">Targetです</div>

javascript
1var eleTrigger, eleTarget, getTriggerH, getTargetH;
2eleTrigger = document.querySelector("[data-trigger='simulationToggle']");
3eleTarget = document.querySelector("[data-target='simulationToggle']");
4
5getTriggerH = eleTrigger.getBoundingClientRect().height;
6getTargetH = eleTarget.getBoundingClientRect().height;
7
8eleTarget.setAttribute("style","height:0px");
9
10eleTrigger.addEventListener('click', function () {
11   this.parentNode.animate({
12       opacity: [1, 0],
13       height: [getTriggerH+"px", "0px"]
14   },{ duration: 100, fill: 'forwards'});
15   eleTarget.animate({
16       opacity: [0, 1],
17       height: ["0px", getTargetH+"px"]
18   },{ duration: 400, delay: 200, fill: 'forwards'});
19});