cssのみで作成するスライダー、画像の自動きりかえも含める（jsなし）

Question

前提・実現したいこと

cssで下記サイトのようなスライダーを作っています（トップ部分）
スライド機能を実装中に思ったような動きになりません。

画像が自動的にスライドされて切り替わる部分です。

https://www.kingjim.co.jp/sp/sr-mk1/

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html
ソースコード

<div class="slide"> <img src="/img/pc/how-to-1.jpg" alt="" class="img1"> <img src="/img/pc/how-to-2.png" alt="" class="img2"> <img src="/img/pc/how-to-3.png" alt="" class="img3"> </div>

css
.slide {
position: relative;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
will-change:transform;
animation:slider 10s infinite;

}

@keyframes slider{
0%{
transform:translateX(0);
}
33%{
transform:translateX(-300px);
}
66%{
transform:translateX(-600px);
}
100%{
transform:translateX(0);
}
}

試したこと

フェードインも試しましたがスライドとは異なる動きになってしまいました。
z-indexで画像をズラしたりも試しました。

補足情報（FW/ツールのバージョンなど）

vscode使用

Answer 1

リンク先のはかなり複雑な動きをしてますが、スクリプトを使ってますね。

CSSだけだとかなり難易度は高いと思います。

シンプルなものなら、
以前、CSSのみのスライダーの質問があったので回答しました。
そこにサンプルがありますのでご参考に。

CSS - cssのみのスライダーで画像が一枚だけ表示されない｜teratail

下記の回答のサンプルはjQueryとCSS アニメーションを組み合わせたもので、リンク先のものにかなり近い動きです。

jQuery - スライドの仕方をhttps://infcurion.digital/のサイトのように動かしたい。｜teratail

Comments

[sora135]

すごくわかりやすい回答をいただきありがとうございます！
左からスライドではなくて上からスライドに変えたくて以下のようにコードをいじってみました。が、やはり横からになります；；

.slide > img {
position: absolute;
top: -50px;
transition: top 3s .7s linear;
}
.slide.is-now > img, .slide.is-now > img {
top: 0;
}

画像をズームして表現するのはtransition:scaleでいいのかなと思いました。

お手すきの時によろしくお願いいたします＞＜