一定の位置に来たら背景画像を止める

Question

##実装したい事
下記のコードですと動きがループされるんですが、
このループを止めて、なおかつ一定の位置で動きを止めたいのですが
なかなか動きを止めることができません、お分かりになられる方是非よろしくお願いいたします。
一定の位置とは１枚の画像の終わり(端)です。

.top1 img {
    -webkit-animation:animation-top1 20s infinite linear;
    animation:animation-top1 20s infinite linear;
    height:100%;
    width:100%;
}
@keyframes animation-top1 {
     
    from{
        -ms-transform:translateY(-30px);
        -webkit-transform:translateY(-30px);
        transform:translateY(-30px);
    }
    to{
        -ms-transform:translateY(0);
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
}

<div class="top1">
    <img src="img/top.png" alt="動かして一定の位置で止めたい画像">
</div>

お時間ある方お助け下さい、よろしくお願いいたします。

Comments

[mri0815]

アニメーション名の指定が"animation-hanabi6"となっていますが、"animation-top1"でよろしいですか？

[satoshickkk]

申し訳ございません"animation-top1"が正解です、編集いたしました。

Answer 1

animation-iteration-countにinfiniteが指定されているため、無限にループします。
参考：http://www.htmq.com/css3/animation-iteration-count.shtml

慣れるまではanimetionで複数のプロパティをスペース区切りで指定するより、
個別に指定したほうが混乱が少ないと思います。
例）

animation-name: animation-top1;
animation-duration: 20s;
animation-timing-function: liner;
animation-iteration-count: 1;

Comments

[satoshickkk]

ありがとうございます！分けて書いた方がわかりやすいですね。
ただ頂きましたコード書いてみたところ私の力不足でうまく動きませんでした、申し訳ありません。
勉強し直してきます。

Answer 2

-webkit-animation:animation-hanabi6 20s infinite linear;
animation:animation-hanabi6 20s infinite linear;

ここを

-webkit-animation:animation-top1 20s 1 linear;
animation:animation-top1 20s 1 linear;

にしてみてはどう？

Comments

[satoshickkk]

いただきましたコードを記入しましたら無事に動いてくれました！
本当に感謝です、ありがとうございました。
またよろしくお願いいたします。