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

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

ただいまの
回答率

89.65%

css アニメーションの配置場所が変更出来ません。

解決済

回答 1

投稿 編集

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

nre

score 10

前提・実現したいこと

フレームワークFlaskで開発したwebアプリケーションの中央下部(スマホ、PC共に)にcssのアニメーションを
表示したいです。

発生している問題・エラーメッセージ

スマホ表示、PC表示共に画面中央に配置されてしまいます。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="{{url_for('static', filename='index.js')}}"></script>
<title>商品を入力して下さい</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>



    <form method="get" action="/output">
        <input type="text" name="name" style="width:350px;" 
        class='sample' placeholder="商品を入力して下さい">
    </form>
    <div id="loader">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      Searching…Now
    </div>

    <script>
    $(function(){
        $('#loader').hide();
        $('form').on('submit',function(){
            $('#loader').fadeIn();

        });
    });
    </script>

    <style>
    @import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');
    body {
          background-color: white;
          font-family: 'Righteous', cursive;
          text-align: center
          }
    </style>


</body>
</html>

#コードは省略しました。

該当のソースコード

body {
  text-align: center;
  background-color: #eee;

  overflow: hidden;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


/* The loader container */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 200px;
  height: 200px;

  margin-top: -100px;
  margin-left: -100px;

  perspective: 200px;
  transform-type: preserve-3d;
 }


/* The dot */
.dot {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 120px;
  height: 120px;

  margin-top: -60px;
  margin-left: -60px;

  border-radius: 100px;
  border: 40px outset #1e3f57;

  transform-type: preserve-3d;
  transform-origin: 50% 50%;

  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);

  background-color: transparent;

  animation: dot1 1000ms cubic-bezier(.49,.06,.43,.85) infinite;
}

.dot:nth-child(2) {
  width: 140px;
  height: 140px;

  margin-top: -70px;
  margin-left: -70px;

  border-width: 30px;
  border-color: #447891;

  animation-name: dot2;
  animation-delay: 75ms;

  box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
}

.dot:nth-child(3) {
  width: 160px;
  height: 160px;

  margin-top: -80px;
  margin-left: -80px;

  border-width: 20px;
  border-color: #6bb2cd;

  animation-name: dot3;
  animation-delay: 150ms;

  box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
}

@keyframes dot1 {
  0% {
    border-color: #1e3f57;
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  }
  50% {
    border-color: #1e574f;
    transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
  }
  100% {
    border-color: #1e3f57;
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  }
}

@keyframes dot2 {
  0% {
    border-color: #447891;
    box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2);
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  }
  50% {
    border-color: #449180;
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8);
    transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
  }
  100% {
    border-color: #447891;
    box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2);
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  }
}

@keyframes dot3 {
  0% {
    border-color: #6bb2cd;
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  }
  50% {
    border-color: #6bcdb2;
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8);
    transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
  }
  100% {
    border-color: #6bb2cd;
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  }
}

試したこと

topやleftなどの位置情報と思われる数値を変更してみましたが、
アニメーションを崩れるだけでした。

補足情報(FW/ツールのバージョンなど)

cssアニメーションはサイトからコピペするだけで導入出来るという物となっております。
下記サイトの上から4つ目に表示されるサークル状のアニメーションです。
http://photoshopvip.net/95239

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • miyabi_takatsuk

    2019/06/20 11:07

    HTMLとCSSも、コードブロックにて(<code>ボタン)質問本文に含めてください。

    キャンセル

  • azuapricot

    2019/06/20 11:12

    コードがない状態でどう回答しろとおっしゃるのでしょうか。
    回答者はエスパーでも超人でもありません。

    キャンセル

  • nre

    2019/06/20 11:27

    おっしゃる通りです。
    テンプレートの使い方がわからず必要な情報を記載する前に投稿してしまいました。
    再度テンプレートを使用して投稿しました。
    ご回答していただければ幸いです。

    キャンセル

  • Lhankor_Mhy

    2019/06/20 11:31

    とりあえず、

    .loader

    #loader

    キャンセル

回答 1

checkベストアンサー

0

今のままだとabsoluteの参照先がないので、
bodyにrelativeを追加したらどうでしょう!

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/06/20 15:33 編集

    ついでに #loader の margin-top:-100px でまるっと上に上がってるぽいのでそこ直したらいい感じでし

    キャンセル

  • 2019/06/20 17:53

    ご回答して頂き誠にありがとうございます。
    masshu様のおかげで無事に問題を解決する事ができました!
    本当にありがとうございます!

    キャンセル

  • 2019/06/20 18:02

    解決できたのならよかったです〜!!
    コピペサイトって思わぬ落とし穴があることが多いのでお互い気をつけていきましょう〜!!

    キャンセル

  • 2019/06/24 22:20

    本当にありがとうございました。
    はい、今後も気をつけて行きます!

    キャンセル

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

  • ただいまの回答率 89.65%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる