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

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

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

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

Q&A

1回答

3592閲覧

keyframesで動きをつけた画像が表示されない

naoco

総合スコア7

CSS

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

0グッド

0クリップ

投稿2018/08/05 20:43

編集2022/01/12 10:55

keyframesで表示したい画像が表示されないでaltで指定した文になってしまうのですがなぜでしょうか

コードは一つの画像についてのコードですが、実際はコレが四つあり%で指定した数値が少しずつずれて指定しています。
ローカルでは画像も表示されるのですがサーバーにアップして動きを確認すると画像が表示されません。

イメージ説明

html <img class="kamon1" src="img/KAMON_bg1.png" alt="背景を動き回る家紋"> ------------- css @keyframes move1{ 0% { top: 0; right: 0; } 20% { top:200px; right:100px; } 40% { top: 400px; right:100px; } 60% { top: 600px; right: 200px; } 80% { top:900px; right:350px; } 100% { top: 1250px; right: 100px; transform: rotate(360deg);} } .kamon1{ position: absolute; animation-name: move1; animation-duration: 19s; animation-timing-function: linear; animation-direction: alternate; animation-iteration-count:infinite; } @-webkit-key frames move1{ 0% { top: 0; right: 0; } 20% { top:200px; right:100px; } 40% { top: 400px; right:100px; } 60% { top: 600px; right: 200px; } 80% { top:900px; right:350px; } 100% { top: 1250px; right: 100px; transform: rotate(360deg);} } .kamon1{ position: absolute; animation-name: move1; animation-duration: 19s; animation-timing-function: linear; animation-direction: alternate; animation-iteration-count:infinite; } コード

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

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

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

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

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

m.ts10806

2018/08/05 22:39

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入(エラーメッセージの場合は不要)の手順で「コードハイライト化」してください。(質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください)
yoshinavi

2018/08/06 01:56

imgへのパスが間違っていて表示されないだけでは?
yoshinavi

2018/08/06 03:05

>ローカルでは画像も表示される・・・画像が表示されません。 → imgがサーバーにアップされていないのでは?
guest

回答1

0

既に指摘されている「アップロードされていない」「アップロード時のディレクトリが間違っている」という可能性以外にも,

  • @-webkit-keyframes@-webkit-key framesになっているせいでバグった」
  • 「転送速度or容量制限に引っかかった」
  • 「サーバへのアップロードの際に,文字コードの設定を間違っている」
  • 「他のCSSに"何か"が上書きされている」

などが考えられます

まずはブラウザの開発者ツールを開き,何らかの警告が出ていないかを確認しましょう
その際,画像ファイルが見当たらないという旨の警告があれば,サーバへのアップロードが適切か確認し,
適切なら,サーバの仕様に沿った操作を行っているか確認しましょう

投稿2018/08/06 11:01

liveasnotes

総合スコア1284

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問