上にcssアニメーションで動かすとカクカク動く

Question

##解決したい事
・繰り返し同じ画像がループ表示される為画像の終わりで動きを停止したい
・動くけどカクカクしながら上へ動いている為なめらかな動きにしたい

width:100%;のフルスクリーンで表示してsectionの中にタイトルなどを表示させようとしています。

section {
 height: 100%;
 width: 100%;
 background-image: url(img/topimg.png);
 -webkit-background-size: 100%;
 background-size: 100%;
 -webkit-animation: bgscroll 150s linear infinite;
 animation: bgscroll 150s linear infinite;
}

@-webkit-keyframes bgscroll {
 100% {background-position: 0 0;}
 0% {background-position: 0 -100px;}
}

@keyframes bgscroll {
 100% {background-position: 0 0;}
 0% {background-position: 0 -100px;}
}

<section>
 
</section>

お分かりになる方お助け下さい、よろしくお願いいたします。

Answer 1

background-positionより軽いようなので、translateYでできないか考えてみてはどうでしょうか？

Comments

[satoshickkk]

translateYでcssを書いてみてなめらかに動くようになりました。
ですが一定の位置になると繰り返し動くので一定の位置になったら画像が停止する動きにするにはどういったcssをかけばよろしいでしょうか？
お分かりになられましたら是非教えてください。

[x_x]

繰り返すのはinfiniteが指定されているからですね。
https://developer.mozilla.org/ja/docs/Web/CSS/animation-iteration-count

[satoshickkk]

infiniteが指定されていると繰り返されると知りませんでした、勉強し直してきます。
ご丁寧にありがとうございました。