CSSアニメーションが、表示される前に始まってしまいます！！
- 評価
- クリップ 0
- VIEW 3,780
退会済みユーザー
CSSアニメーションを作ろうと思いました。
コード
この質問はコードに関することではないので、適当に書きます。
<body>
<div class="circle"></div>
</body>.circle {
position: absolute;
bottom: 100%;
width: 4px;
height: 4px;
border-radius: 50%;
background: white;
}
.circle {
animation: move 10.0s ease 0s forwards;
}
@keyframes move {
from {
bottom: 100%;
}
to {
bottom: 0%;
}
}
これは丸いdivが、10秒間かけて下に移動していくアニメーションです。
animationのところを見てもらえばわかる通り、このアニメーションは0秒からスタートします。
問題
これをPCで読み込んだ場合は問題は起こりません。
ただ、スマホで読み込んだ時に、画面が表示される前に、アニメーションが始まってしまいます。
多分読み込まれる2秒前くらいからスタートします。
これを、表示されたと同時にスタートさせるにはどうしたらよいでしょうか。
自分で考えた例
var circle = $(".circle"); //circleの読み込み
var ua = navigator.userAgent; //デバイス取得
$(function () {
if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
//スマホ用コード
setTimeout(assignFirstAnimation, 500); //500ミリ秒遅らせる
} else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
// タブレット用コード
setTimeout(assignFirstAnimation, 500); //500ミリ秒遅らせる
} else {
// PC用コード
assignFirstAnimation(); //遅らせない
}
});
//circleにアニメーションを割り振る
function assignFirstAnimation() {
circle.css("animation", "move 10.0s ease 0s forwards")
}このコードは、デバイスを判別して、スマホかタブレットだった場合、500ミリ秒後に、circleにanimationの部分を割り振るものです。(もちろんcssのanimationプロパティの部分は消します。)
これで一応いい感じになりますが、これだと、この後にアニメーションを描こうとした時に、全部ずれ込むためjsで全部割り振っていかなければいけなくなります。
それは大変なので、スマホの読み込み完了を検知するよい方法がないかなと思った次第です。
できれば、jsのonloadイベント的なもので、携帯の読み込み後に発火するものがあると一番いいのですが。。。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+1
画面読み込み後にclassを付ける方法はいかがでしょうか。
<body>
<div class="" id="circle"></div>
</body>$(function(){
$("#circle").addClass('circle');
});投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
0
イベントが用意されています。
animationend
https://developer.mozilla.org/en-US/docs/Web/Events/animationend
CSSアニメーションの終了をJavaScriptで検知する
http://kimizuka.hatenablog.com/entry/2015/09/21/000000
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
PCで見た時にも、500ミリ秒後遅らせる方法ではダメでしょうか・・？
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
レスポンシブでスマホの時だけアニメーションを遅延して開始させる animation-delay プロパティを適用するのはいかがでしょうか？
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.35%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
m.ts10806
2018/07/11 11:52
https://teratail.com/help/question-tips#questionTips3-1 >ありがちな失敗としては、「助けてください」「初心者です」という表題をつけてしまうことです。