[css, js] CSS animationの終わり方

Question

下から上に動く四角をCSSのanimationで作りたいのですが、
はじめは、不可視領域の「1」から始まり「2」に消えていきます。
それを2〜3周して、最後「A」で止めたいです。

ただし最後「A」にパッと現れる動きしか作れなくて
「1」から「A」へ滑らかに進み、止まるという手法を
どなたかご存知でしたら教えてほしいです。

CSSで実現不可の場合、jsでどうにかなるのであれば
その手法も教えていただけましたら幸いです。

#hero img {
　width: 400px;
　height: 600px;
　position: absolute;
　bottom: 0;
　left: 0;
　animation-delay: 4s;
　animation-name: up;
　animation-duration: 5s;
　animation-iteration-count: 3;
　animation-timing-function: linear;
}

@keyframes up {
　0% { bottom: -600px; }
　100% { bottom: 100vh; }
}

Answer 1

画像をabsoluteにしてtop位置で調整する
冗長に書くとこんな感じですかね

• codepen

Comments

[vermontcurry]

ご回答ありがとうございます！！
リロードすると動きが変わってしまいますが、キャッシュが関わってくるのでしょうか…？

[yambejp]

> リロードすると動きが変わってしまいます

とはどうい現象のことでしょうか？
もしcodepenをリロードしているなら特殊なサイトですから
ご自身の環境にソースをコピペして試してみてくださ

[vermontcurry]

なるほどです…！申し訳ありません、codepenの仕組みを理解しておりませんでした。
自身の環境では叶えることができました！
ありがとうございました！！

Answer 2

CSSのanimationだけでご希望の動きは可能です。

とりあえず下記のリンク先等を参考にご自身でできるところまでコードを書いて、質問に追記してください。そのうえで行き詰ったところで、どこがうまくいかないか具体的に説明してください。

【CSS】animation・keyframesを徹底解説 – WEBDESIGNDAY

animation - CSS: カスケーディングスタイルシート | MDN

---

CSS animation のみで実現する方法です。

<div id="hero">
<img src="http://placehold.jp/400x600.png">
</div>

#hero img {
  width: 400px;
  height: 600px;
  position: absolute;
  bottom: -600px;
  left: 0;
  animation: up 4s linear 5s 3,
             up2 2s linear 17s forwards;
}

@keyframes up {
  0% { bottom: -600px; }
  100% { bottom: 100vh; }
}

@keyframes up2 {
  0% { bottom: -600px; }
  100% { bottom: 0; }
}

Codepenサンプル

Comments

[vermontcurry]

#hero img {
　width: 400px;
　height: 600px;
　position: absolute;
　bottom: 0;
　left: 0;
　animation-delay: 4s;
　animation-name: up;
　animation-duration: 5s;
　animation-iteration-count: 3;
　animation-timing-function: linear;
}

@keyframes up {
　0% { bottom: -600px; }
　100% { bottom: 100vh; }
}

ご回答ありがとうございます。
上記書いておりますが、最後をどう処理したらいいのかわかりません。

[hatena19]

質問は編集できますので、コードは質問に追記してください。
HTMLのコードも追記してください。
あと、CSSコードに全角空白がはいってますので、半角空白に修正してください。

[vermontcurry]

>CSS animation のみで実現する方法です。

ありがとうございました。理想的な動きです。
コードもシンプルで素晴らしいです。

-----------------

（1回目のご回答）
>とりあえず下記のリンク先等を参考にご自身でできるところまでコードを書いて、質問に追記してください。そのうえで行き詰ったところで、どこがうまくいかないか具体的に説明してください。

（2回目のご回答）
>質問は編集できますので、コードは質問に追記してください。

（3回目のご回答）
>HTMLのコードも追記してください。
>あと、CSSコードに全角空白がはいってますので、半角空白に修正してください。

-----------------

当方丸投げをしていた訳ではないので、
「我がのルールに従わなければ回答しない」というスタンスで
何度も細かく質問の修正依頼をいただくのではなく
ある程度把握いただけたであろう時点でシンプルにご回答をいただけていればベストアンサーでした。

[hatena19]

コードが呈示される前の質問はあきらかに丸投げだと思いますけど。
「我がのルール」ではなくteratailのルールです。
推奨していない質問
https://teratail.com/help/avoid-asking

質問の編集の依頼は、今後の訪問者が読みやすく検証しやすくするためのものです。
利用者により有用な資源になります。

[vermontcurry]

>https://teratail.com/help/avoid-asking
当方の質問はこちらには該当していないと考えますが。
現にベストアンサーの方には内容をご理解いただいておりますし、的確なご回答をいただいております。

質問の編集依頼はもちろんいただいて構いません。何度も行う執拗なご指示でなければ。
（コードは質問内に記述しないといけないとか半角云々というルールはありませんが）

[hatena19]

やりたいことは記述してありましたが、

推奨していない質問より
「問題や質問は実際に調査や作業に取り組み、具体的なところで生まれると考えるためです。
まずは実際に作業に取り組み、つまづいたところで投稿をしてみてください。」
この実際に調査したことや取り組んだ作業についての記述はなかったです。

「コードは質問内に記述」は、訪問者の利便性のため（コメントまでみない場合が多い）
「半角云々」は明らかなコードの間違いを指摘しただけです。

[vermontcurry]

ええ、ですので、以下に尽きます。

>質問の編集依頼はもちろんいただいて構いません。何度も行う執拗なご指示でなければ。

スタイルを記述している直前の全角スペースの修正など
「必須」でないやりとりを何度も行う時間はございません。また、

>「コードは質問内に記述」は、訪問者の利便性のため（コメントまでみない場合が多い）
>「半角云々」は明らかなコードの間違いを指摘しただけです。

最初からそのように書いていただければお互い気分良く利用できたのではないでしょうか。

[hatena19]

言葉足らずだったかも。
全角空白ではコードは動きません、
訪問者さんはコメントまで見ない場合がある、
と書けば、こちらの意図が伝わったかな（反省）

[vermontcurry]

>全角空白ではコードは動きません、

利用者がコードを丸コピして使ったりするところにまで配慮しておりません。
あくまで「質問の見やすさ」を優先しました。

「質問者」の最優先事項は「問題の早期解決」です。

第三者（サイト閲覧者）への配慮はその次です。
それらが常に行えるか否かは、経験や個人の状況にもよります。
また、本当に解決したい人間はコメント欄であっても読みますし、という考え方もできると思います。

質問の書き方など、教えていただいたことは今後に役立てたいと思いますが
サイト閲覧者への配慮は素晴らしいのに、質問者への配慮は欠けておられるのでは？と思いました。
オンラインであれ、そこには「生身の人間がいる」ということを今一度お考えくださいませ。
ではこちらもうクローズとさせていただきますのでこれ以上のコメントは不要です。
ご拝読ありがとうございました。

[hatena19]

これで「何度も行う執拗なご指示」と取られるとは思いもよりませんでした。
そのように感じる人間がいるということは肝に銘じておきます。

あと、
マークダウンのコードブロック内では半角空白のインデントは有効ですので、全角にする必要性はないというアドバイスはしておきます。