スライドショー画像移動が早すぎるので、遅くしたい。cssのみ使用。

Question

スライドショー　@keyframsの速度を遅くしたい。現在のスライドショーの速度が早すぎる。

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

もう少しゆっくりスライドショーを回転させたいです。

特にありません

該当のソースコード

【html】
<div id="mainPhoto">
<div class="slider">
<div class="slider__content"><img src="images/main1.jpg" alt="" class="slider__img"></div>
<div class="slider__content"<img src="images/main2.jpg" alt="" class="slider__img"></div>
<div class="slider__content"><img src="images/main3.jpg" alt="" class="slider__img"></div>

</div> </div>

【ｃｓｓ】
.slider{
width: 1200px;
height: 518px;
overflow: hidden;
position: relative;
margin:auto;
}

.slider__content{
min-width: 100%;
position: absolute;
top: 0;
left: 0;
transform: translateX(100%);
background-color: #000;
}

.slider__content:nth-child(1){
animation: sliderAnime 6s ease-in-out infinite;
z-index: 6;
}

.slider__content:nth-child(2){
animation: sliderAnime2 6s ease-in-out 1s infinite;
z-index: -1;
}

.slider__content:nth-child(3){
animation: sliderAnime2 6s ease-in-out 3s infinite;
z-index: -1;
}

@keyframes sliderAnime{
0%{
z-index: 5;
transform: translateX(0);
}
16.6%{
transform: translateX(0);
}
33.3%{
transform: translateX(-100%);
}
50%{
z-index: -1;
transform: translateX(-100%);
}
66.6%{
transform: translateX(100%);
}
83.2%{
z-index: 5;
transform: translateX(100%);
}
100%{
z-index: 5;
transform: translateX(0);
}
}

@keyframes sliderAnime2{
0%{
z-index: 5;
transform: translateX(100%);
}
16.6%{
transform: translateX(0);
}
33.3%{
transform: translateX(0);
}
50%{
transform: translateX(-100%);
}
66.6%{
z-index: -1;
transform: translateX(-100%);
}
83.2%{
transform: translateX(100%);
}
100%{
z-index: 5;
transform: translateX(100%);
}
}

### 試したこと

6sなどの秒数をとりあえず倍の12sと記載。
その後、@keyframs 以下の●●％と記載ある数字をいろいろ入れ替えてみました。

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

DW CC 2019-2020
すでに同様の質問がありましたら申し訳ないです。
画像回転速度をいろいろ試してみたのですが、わかりやすい説明サイトも見当たらず、困っています。
どうぞよろしくお願いいたします。

Comments

[hatena19]

HTMLのコードも提示してください。

Answer 1

下記でどうでしょうか。

.slider {
	width: 1200px;
	height: 518px;
	overflow: hidden;
	position: relative;
	margin: auto;
}

.slidercontent {
	min-width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(100%);
	background-color: #000;
}

.slidercontent:nth-child(1) {
	animation: sliderAnime 12s ease-in-out infinite;
	z-index: 6;
}

.slidercontent:nth-child(2) {
	animation: sliderAnime2 12s ease-in-out 2s infinite;
	z-index: -1;
}

.slidercontent:nth-child(3) {
	animation: sliderAnime2 12s ease-in-out 6s infinite;
	z-index: -1;
}

@keyframes sliderAnime {
	0% {
		z-index: 5;
		transform: translateX(0);
	}
	16.6% {
		transform: translateX(0);
	}
	33.3% {
		transform: translateX(-100%);
	}
	50% {
		z-index: -1;
		transform: translateX(-100%);
	}
	66.6% {
		transform: translateX(100%);
	}
	83.2% {
		z-index: 5;
		transform: translateX(100%);
	}
	100% {
		z-index: 5;
		transform: translateX(0);
	}
}

@keyframes sliderAnime2 {
	0% {
		z-index: 5;
		transform: translateX(100%);
	}
	16.6% {
		transform: translateX(0);
	}
	33.3% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(-100%);
	}
	66.6% {
		z-index: -1;
		transform: translateX(-100%);
	}
	83.2% {
		transform: translateX(100%);
	}
	100% {
		z-index: 5;
		transform: translateX(100%);
	}
}

動作確認サンプル

修正したこと

1. HTMLとCSSでクラス名が違ってましたので、HTMLに揃えました。

.slider__content→.slidercontent

1. 6sなどの秒数をすべて倍にした。

6s→12s
1s→2s
3s→6s

以上です。

Comments

[ema-material]

ありがとうございます。
クラス名の違うhtmlをなぜ貼り付けたのかは謎ですが、解決しました。
難しく考えすぎていたようで、解決の糸口をいただけたことに感謝します。