[CSSアニメーション]要素をスライドインさせるときにスクロールバーが表示されないようにしたい

cssアニメーションで画像を右から（何もない状態から）スライドインさせたいのですが、スライドインする瞬間、スクロールバーが現れます。

すぐ消えるのですが、一瞬出るのがなんとなくダサいです。　スクロールバーが出ないようにする方法はあるのでしょうか？

html
1<body>
2 <img src="gazou.png"id="img">
3</body>

css
1html{
2  width: 100%;
3  height:100%;
4}
5body{
6  width: 100%;
7  height: 100%;
8  margin: 0;
9}
10#img{
11
12 width:10%
13
14 animation-name:slide_in;
15 animation-duration:3s;
16}
17@keyframes　slide_in{
18 0%{
19     left:110%;/* この瞬間、画像が外に出て、スクロールバーが出現する*/
20  }
21 100%{
22     left:10%;
23  }
24
25}

行動規範の内容に同意します

回答1件

ベストアンサー

overflow-x:hidden;でいいのですが、bodyにつけるのは気が引けるので適当なコンテナを用意したらどうでしょうか。

HTML
1<div style="overflow:hidden">
2  <img src="gazou.png" id="img" />
3</div>

投稿2018/04/06 05:59

x_x

総合スコア13749

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

[CSSアニメーション]要素をスライドインさせるときにスクロールバーが表示されないようにしたい

関連した質問