CSSanimateをすると画面のスクロールサイズが変わってしまう！

Question

CSSanimateをすると画面のスクロールサイズが変わってしまう！

解決済

回答 2

投稿 2018/04/21 09:26 ・編集 2018/04/21 09:43

評価
クリップ 0
VIEW 335

Usagino

score 10

CSSanimateをすると画面のスクロールサイズが変わってしまう！

こんにちわ、この度学校の授業で色々とCSSanimateを使う機会が増えてきました。

さて今回私が作ったこれ

Hello,worldがヒュンヒュンヒュンと出てきてふわぁって消えるアニメーションです。

ですが、なぜかこれふわあって消えた後に画面の横のスクロールサイズが大きくなってしまってスクロールできるようになってしまうんですよ...

htmlはこちら

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>helloworld_anime</title>
  <link rel="stylesheet" href="stylesheet/style.css">
</head>

<body>
  <div class="svg_wrap">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 627.5 86.9">
      <title>hello_world</title>
      <g id="レイヤー_2" data-name="john">
        <g id="レイヤー_1-2" data-name="レイヤー 1">
        <path d="M0,5.2H12.3V6.3a2.571,2.571,0,0,0-.6,1.3,12.375,12.375,0,0,0-.2,2.4V30.5H29.9V5.2H42.2V6.3a3.589,3.589,0,0,0-.7,1.3,16.694,16.694,0,0,0-.1,2.4V67.5H29.9V39.8H11.5V67.5H0Z"/><path d="M60.7,66.2a20.554,20.554,0,0,1-8.3-8.4,27.114,27.114,0,0,1-3-13,29.343,29.343,0,0,1,2.9-13.3,20.371,20.371,0,0,1,7.8-8.6,21.522,21.522,0,0,1,11.4-3.1,20.179,20.179,0,0,1,10.1,2.6,18.218,18.218,0,0,1,7.1,7.7,26.451,26.451,0,0,1,2.7,12.5q0,.5-.2,3.3l-.1,1.4H60.5q.7,6.3,4,9.6a10.665,10.665,0,0,0,7.8,3.3,15.626,15.626,0,0,0,6.5-1.5,14.1,14.1,0,0,0,5.4-4.2l6.2,6.2a22.251,22.251,0,0,1-17.7,8.4A24.587,24.587,0,0,1,60.7,66.2ZM80.2,39.1a12.4,12.4,0,0,0-1.1-5.4,10.272,10.272,0,0,0-3.3-4,8.212,8.212,0,0,0-4.9-1.5,8.7,8.7,0,0,0-6.8,2.9,13.148,13.148,0,0,0-3.2,8Z"/>
        <path d="M103,0h23.5V58.8h12.2v8.7H115.2V8.7H103Z"/>
        <path d="M153,0h23.5V58.8h12.2v8.7H165.2V8.7H153Z"/>
        <path d="M220.8,69.1a21.494,21.494,0,0,1-19.3-12,28.41,28.41,0,0,1-2.9-12.9,25.783,25.783,0,0,1,2.9-12.4,23,23,0,0,1,8.1-8.8A21.2,21.2,0,0,1,232,23a23.041,23.041,0,0,1,8.1,8.8A25.818,25.818,0,0,1,243,44.2a28.449,28.449,0,0,1-2.9,12.9,21.494,21.494,0,0,1-19.3,12Zm5.7-11a13.438,13.438,0,0,0,3.8-5.6,23.311,23.311,0,0,0,1.4-8.3,22.8,22.8,0,0,0-1.4-8.3,11.777,11.777,0,0,0-3.8-5.2,9.183,9.183,0,0,0-5.7-1.9,9.034,9.034,0,0,0-5.6,1.9,11.6,11.6,0,0,0-3.7,5.3,22.463,22.463,0,0,0-1.4,8.2,24.165,24.165,0,0,0,1.3,8.4,11.979,11.979,0,0,0,3.7,5.5,9.121,9.121,0,0,0,11.4,0Z"/>
        <path d="M259.1,81.1a32.151,32.151,0,0,0,5.4-6.2q2.1-3.2,2.1-5.1a1.234,1.234,0,0,0-.5-1l-1.5-1.5a26.261,26.261,0,0,1-2.6-2.8,5.737,5.737,0,0,1-1-3,7.878,7.878,0,0,1,1.2-4.1,7.418,7.418,0,0,1,3-2.9,9.179,9.179,0,0,1,4.5-1,8.446,8.446,0,0,1,4.6,1.4,10.37,10.37,0,0,1,3.5,3.7,11.015,11.015,0,0,1,1.3,5.5q0,4.5-3.3,10.2-3,5.3-10.3,12.6Z"/><path d="M353.9,67.5,346.3,5.2h10.9l3.6,41.1,7.3-36h7.2L382.6,46l2.6-40.8h10.4l-7.4,62.3h-8.8l-8.2-37.9-8.3,37.9Z"/>
        <path d="M420.8,69.1a21.494,21.494,0,0,1-19.3-12,28.41,28.41,0,0,1-2.9-12.9,25.783,25.783,0,0,1,2.9-12.4,23,23,0,0,1,8.1-8.8A21.2,21.2,0,0,1,432,23a23.041,23.041,0,0,1,8.1,8.8A25.818,25.818,0,0,1,443,44.2a28.449,28.449,0,0,1-2.9,12.9,21.494,21.494,0,0,1-19.3,12Zm5.7-11a13.438,13.438,0,0,0,3.8-5.6,23.311,23.311,0,0,0,1.4-8.3,22.8,22.8,0,0,0-1.4-8.3,11.777,11.777,0,0,0-3.8-5.2,9.183,9.183,0,0,0-5.7-1.9,9.034,9.034,0,0,0-5.6,1.9,11.6,11.6,0,0,0-3.7,5.3,22.463,22.463,0,0,0-1.4,8.2,24.165,24.165,0,0,0,1.3,8.4,11.979,11.979,0,0,0,3.7,5.5,9.121,9.121,0,0,0,11.4,0Z"/>
        <path d="M448.6,58.8h6v-29h-5.8v-9h17.3v7.1a15.322,15.322,0,0,1,5.9-6.1,15.753,15.753,0,0,1,7.9-2.1,17.52,17.52,0,0,1,6.7,1.4,18.48,18.48,0,0,1,6,3.8L489,33.5l-1.6-1.4a26.371,26.371,0,0,0-3-2.3,10.234,10.234,0,0,0-2.9-1.3,16.227,16.227,0,0,0-4.3-.5,12.46,12.46,0,0,0-5.2,1.3,10.206,10.206,0,0,0-4.3,3.8,11.819,11.819,0,0,0-1.8,6.7v19h8.6v8.7H448.6Z"/>
        <path d="M503,0h23.5V58.8h12.2v8.7H515.2V8.7H503Z"/><path d="M558.5,66.3a19.842,19.842,0,0,1-7.2-8.2q-2.6-5.2-2.6-13.2a31.027,31.027,0,0,1,2.7-13.4,21.424,21.424,0,0,1,7.3-8.7,17.313,17.313,0,0,1,9.8-3,14.09,14.09,0,0,1,5.8,1.3,14.347,14.347,0,0,1,5,3.4V0h12.2V1.1a2.574,2.574,0,0,0-.6,1.3,12.375,12.375,0,0,0-.2,2.4l-.2,57.1a27.609,27.609,0,0,0,.2,3,6.341,6.341,0,0,0,.9,2.6H580.7a7.269,7.269,0,0,1-.8-2.4,30.148,30.148,0,0,1-.1-3.2,10.755,10.755,0,0,1-4.7,5.3,13.131,13.131,0,0,1-6.5,1.8A19.249,19.249,0,0,1,558.5,66.3Zm20.9-22.7q0-6.8-1.9-10.7-1.9-4-7-4a8.568,8.568,0,0,0-7.9,4.4Q560,37.7,560,44.7a21.386,21.386,0,0,0,1.5,8.6,11.119,11.119,0,0,0,3.9,4.9,8.658,8.658,0,0,0,4.8,1.5Q579.4,59.7,579.4,43.6Z"/><path d="M615.7,67.5a6.521,6.521,0,0,1-2.8-2.6,6.98,6.98,0,0,1,0-7.2,8.322,8.322,0,0,1,2.8-2.7,7.553,7.553,0,0,1,3.9-1,7.874,7.874,0,0,1,4,1.1,8.151,8.151,0,0,1,2.9,2.7,6.53,6.53,0,0,1-.1,7.1,8.63,8.63,0,0,1-2.9,2.6,7.558,7.558,0,0,1-3.9,1A8.7,8.7,0,0,1,615.7,67.5ZM612.8,10l-.1-1.2q0-4.3,1.9-6.3A6.656,6.656,0,0,1,619.8.4a6.9,6.9,0,0,1,5.1,1.9q2,2,2,6.3a5.841,5.841,0,0,1-.1,1.4l-2.6,37.7h-9Z"/></g></g></svg>
  </div>
</body>

</html>

スタイルシート(sass)はこちら

.svg_wrap {
  text-align: center;
  margin-top: 40vh;
}

.svg_wrap svg {
  width: 50vw;
  height: auto;
  animation: zoom 2s;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}

.svg_wrap svg path {
  fill: #000;
  fill-opacity: 0;
  stroke: #000;
  stroke-width: 1px;
  animation: path 3s;
  animation-fill-mode: forwards;
}

@keyframes path {
  0% {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    fill-opacity: 0;
  }
  50% {
    stroke-dashoffset: 50;
    fill-opacity: 0;
  }
  100% {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    fill-opacity: 1;
  }
}

@keyframes zoom {
  0% {
    opacity: 1;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    display: none;
    transform: scale(3, 3);
  }
}

構文やインデントの書き方が気持ち悪いって方もいらっしゃると思いますが、何卒よろしくお願いします

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

評価を下げられる数の上限に達しました

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

この機能は開放されていません

評価を下げる条件を満たしてません

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問広告と受け取られるような投稿
詳細な説明はこちら

上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。
質問の評価を下げる機能の利用条件

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

5 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

退会済みユーザー

2018/04/21 09:39

質問者様が作成したアニメーションがリンク切れを起こしており見ることができません。

質問者様が作成したアニメーションがリンク切れを起こしており見ることができません。

キャンセル
Usagino

2018/04/21 09:41

ただいま問題解決のため調べているのですがmacのchromeでteratailを開き、gifを選択しても開くことができない状況です。報告ありがとうございます

ただいま問題解決のため調べているのですがmacのchromeでteratailを開き、gifを選択しても開くことができない状況です。報告ありがとうございます

キャンセル
退会済みユーザー

2018/04/21 09:42

回答者が同じ環境にしやすい様にscssはcssにビルドした状態を提示してください。

回答者が同じ環境にしやすい様にscssはcssにビルドした状態を提示してください。

キャンセル
Usagino

2018/04/21 09:43

わかりました。直しておきます

わかりました。直しておきます

キャンセル
退会済みユーザー

2018/04/21 09:45 編集

今回を機にメモです。sassとscssは記法が異なります。質問者様の記法だとscssとなります。拡張子をつける際にもご注意ください。

今回を機にメモです。sassとscssは記法が異なります。質問者様の記法だとscssとなります。拡張子をつける際にもご注意ください。

キャンセル

回答 2 件

評価が高い順
新着順
古い順

+1

.svg_wrapにoverflow: hiddenを指定してみてはいかがでしょうか。
この時に.svg_wrapにはwidthを指定することをお忘れなく。
アニメーションが終了した後に要素がブラウザの横に残っていてそれが原因で横スクロールが出ている様な気がします。

投稿 2018/04/21 09:52

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

score 2 · Accepted Answer · 2018-04-21T11:13

ベストアンサー

+2

displayはanimatableではありません(CSS Animations/Transitionsで操作できない).

従って, アニメーション完了時の3倍サイズのままSVG要素がスクリーンに居残っていて, これがスクロールバーの表示の原因となっています.

https://drafts.csswg.org/css-transitions/#animatable-properties

そのため, アニメーションの終了直前(1フレーム=1/60s以内)にSVG要素のズームを解除するようにすればこの問題は解決します. この時点で既にSVG要素は殆ど透明に近い状態ですから, ズームサイズの変化が気になることはないでしょう.

@keyframes zoom {
  0% {
    opacity: 1;
    transform: scale(1, 1);
  }
  99.99% {
    opacity: 0;
    transform: scale(3, 3);
  }
  100%{
    opacity: 0;
    transform: scale(1, 1);
  }
}

投稿 2018/04/21 11:13

編集 2018/04/21 11:21

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

CSSanimateをすると画面のスクロールサイズが変わってしまう！

CSSanimateをすると画面のスクロールサイズが変わってしまう！

htmlはこちら

スタイルシート(sass)はこちら

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

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン