回答編集履歴
2
文言修正
answer
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
[https://drafts.csswg.org/css-transitions/#animatable-properties](https://drafts.csswg.org/css-transitions/#animatable-properties)
|
|
6
6
|
|
|
7
|
-
そのため, アニメーションの終了直前(
|
|
7
|
+
そのため, アニメーションの終了直前(1フレーム=1/60s以内)にSVG要素のズームを解除するようにすればこの問題は解決します. この時点で既にSVG要素は殆ど透明に近い状態ですから, ズームサイズの変化が気になることはないでしょう.
|
|
8
8
|
|
|
9
9
|
```CSS
|
|
10
10
|
@keyframes zoom {
|
1
情報源を追加
answer
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
|
-
`display`はanimatableではありません
|
|
1
|
+
`display`は**animatableではありません**(CSS Animations/Transitionsで操作できない).
|
|
2
2
|
|
|
3
|
+
従って, アニメーション完了時の3倍サイズのままSVG要素がスクリーンに居残っていて, これがスクロールバーの表示の原因となっています.
|
|
4
|
+
|
|
5
|
+
[https://drafts.csswg.org/css-transitions/#animatable-properties](https://drafts.csswg.org/css-transitions/#animatable-properties)
|
|
6
|
+
|
|
3
7
|
そのため, アニメーションの終了直前(100%の1フレーム前以内)にSVG要素のズームを解除するようにすればこの問題は解決します. この時点で既にSVG要素は殆ど透明に近い状態ですから, ズームサイズの変化が気になることはないでしょう.
|
|
4
8
|
|
|
5
9
|
```CSS
|