MDNによると:
from
/0%
またはto
/が指定されていない場合100%
、ブラウザはすべての属性の計算値を使用してアニメーションを開始または終了します。
次の例では、height
プロパティの計算値は次のとおりです0px
。
div#parent {
width: 100px;
height: 100px;
outline: 1px solid teal;
}
div#child {
background: tan;
animation: lengthen 2s infinite;
}
@keyframes lengthen {
to {
height: 100px;
}
}
<div id="parent">
<div id="child"></div>
</div>
しかし、ブラウザーはvalue で指定されheight: auto;
た要素である を使用するため、アニメーションが機能しません。
仕様に似たものは次のとおりです。
0%
またはキーフレームが指定されていない場合from
、ユーザー エージェントは0%
、アニメーション化されているプロパティの計算値を使用してキーフレームを構築します。100%
またはキーフレームが指定されていない場合to
、ユーザー エージェントは100%
、アニメーション化されているプロパティの計算値を使用してキーフレームを構築します。
しかし、ブラウザーが実際にfrom {height: 0px;}
計算値である を追加した場合、アニメーションは適切に機能します。上記のドキュメントでは、計算値の代わりに指定された値を使用する方が正確ではありませんか?