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

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

ただいまの
回答率

90.32%

  • HTML

    9587questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6209questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Webサイト

    1131questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

  • Sass

    280questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 183

Usagino

score 3

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

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

さて今回私が作ったこれ

gif

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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

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

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

    評価を下げる理由を選択してください

    詳細な説明はこちら

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

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

  • easy_no_easy

    2018/04/21 09:42

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

    キャンセル

  • Usagino

    2018/04/21 09:43

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

    キャンセル

  • easy_no_easy

    2018/04/21 09:45 編集

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

    キャンセル

回答 2

checkベストアンサー

+2

displayanimatableではありません(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);
  }
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • HTML

    9587questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6209questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Webサイト

    1131questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

  • Sass

    280questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。