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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

Q&A

解決済

1回答

509閲覧

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

nre

総合スコア35

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

0グッド

0クリップ

投稿2019/06/20 02:05

編集2019/06/20 02:24

前提・実現したいこと

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

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

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

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}"> 6<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 7<script src="{{url_for('static', filename='index.js')}}"></script> 8<title>商品を入力して下さい</title> 9<meta name="viewport" content="width=device-width,initial-scale=1"> 10</head> 11<body> 12 13 14 15 <form method="get" action="/output"> 16 <input type="text" name="name" style="width:350px;" 17 class='sample' placeholder="商品を入力して下さい"> 18 </form> 19 <div id="loader"> 20 <div class="dot"></div> 21 <div class="dot"></div> 22 <div class="dot"></div> 23 Searching…Now 24 </div> 25 26 <script> 27 $(function(){ 28 $('#loader').hide(); 29 $('form').on('submit',function(){ 30 $('#loader').fadeIn(); 31 32 }); 33 }); 34 </script> 35 36 <style> 37 @import url('https://fonts.googleapis.com/css?family=Righteous&display=swap'); 38 body { 39 background-color: white; 40 font-family: 'Righteous', cursive; 41 text-align: center 42 } 43 </style> 44 45 46</body> 47</html> 48 49#コードは省略しました。

該当のソースコード

css

1body { 2 text-align: center; 3 background-color: #eee; 4 5 overflow: hidden; 6} 7 8* { 9 -webkit-box-sizing: border-box; 10 -moz-box-sizing: border-box; 11 box-sizing: border-box; 12} 13 14 15/* The loader container */ 16.loader { 17 position: absolute; 18 top: 50%; 19 left: 50%; 20 21 width: 200px; 22 height: 200px; 23 24 margin-top: -100px; 25 margin-left: -100px; 26 27 perspective: 200px; 28 transform-type: preserve-3d; 29 } 30 31 32/* The dot */ 33.dot { 34 position: absolute; 35 top: 50%; 36 left: 50%; 37 38 width: 120px; 39 height: 120px; 40 41 margin-top: -60px; 42 margin-left: -60px; 43 44 border-radius: 100px; 45 border: 40px outset #1e3f57; 46 47 transform-type: preserve-3d; 48 transform-origin: 50% 50%; 49 50 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 51 52 background-color: transparent; 53 54 animation: dot1 1000ms cubic-bezier(.49,.06,.43,.85) infinite; 55} 56 57.dot:nth-child(2) { 58 width: 140px; 59 height: 140px; 60 61 margin-top: -70px; 62 margin-left: -70px; 63 64 border-width: 30px; 65 border-color: #447891; 66 67 animation-name: dot2; 68 animation-delay: 75ms; 69 70 box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1); 71 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 72} 73 74.dot:nth-child(3) { 75 width: 160px; 76 height: 160px; 77 78 margin-top: -80px; 79 margin-left: -80px; 80 81 border-width: 20px; 82 border-color: #6bb2cd; 83 84 animation-name: dot3; 85 animation-delay: 150ms; 86 87 box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1); 88 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 89} 90 91@keyframes dot1 { 92 0% { 93 border-color: #1e3f57; 94 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 95 } 96 50% { 97 border-color: #1e574f; 98 transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px); 99 } 100 100% { 101 border-color: #1e3f57; 102 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 103 } 104} 105 106@keyframes dot2 { 107 0% { 108 border-color: #447891; 109 box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2); 110 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 111 } 112 50% { 113 border-color: #449180; 114 box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8); 115 transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px); 116 } 117 100% { 118 border-color: #447891; 119 box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2); 120 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 121 } 122} 123 124@keyframes dot3 { 125 0% { 126 border-color: #6bb2cd; 127 box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1); 128 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 129 } 130 50% { 131 border-color: #6bcdb2; 132 box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8); 133 transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px); 134 } 135 100% { 136 border-color: #6bb2cd; 137 box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1); 138 transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); 139 } 140}

試したこと

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2019/06/20 02:07

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

2019/06/20 02:12

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

2019/06/20 02:27

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

2019/06/20 02:31

とりあえず、 .loader ↓ #loader
guest

回答1

0

ベストアンサー

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

投稿2019/06/20 06:27

masshu

総合スコア83

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

masshu

2019/06/20 06:54 編集

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

2019/06/20 08:53

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

2019/06/20 09:02

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

2019/06/24 13:20

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問