スライダー（FadeIN・Out 型）

投稿日:2014年8月26日作成者: tyosbb

スライドショーが進行する途中で、マウスオーバーで表示される送りボタン（＜（左）　＞（右））のクリックで、スライドをその方向に進行させるとともに、スライドショーの方向もクリックした方向に切り替えるタイプのスライダーである。今回の投稿は、スライド切替時のエフェクトをフェイドイン・アウトとしている。

サンプル

表示用ＨＴＭＬ

<div id="stage">
  <div id="frame">
    <input type="radio" id="back1" name="gal">
    <input type="radio" id="back2" name="gal">
    <input type="radio" id="back3" name="gal">
    <input type="radio" id="back4" name="gal">
    <input type="radio" id="back5" name="gal">
    <input type="radio" id="next1" name="gal">
    <input type="radio" id="next2" name="gal">
    <input type="radio" id="next3" name="gal">
    <input type="radio" id="next4" name="gal">
    <input type="radio" id="next5" name="gal">
  <div id="photos">
      <div id="photo1" class="pic"><img src="img2/1.jpg">
	    <label for="back1"><div id="left1" class="b_left"><span>＜</span></div></label> 
	    <label for="next1"><div id="right1" class="b_right"><span>＞</span></div></label>
      </div>
      <div id="photo2" class="pic"><img src="img2/2.jpg">
	    <label for="back2"><div id="left2" class="b_left"><span>＜</span></div></label>
    	<label for="next2"><div id="right2" class="b_right"><span>＞</span></div></label>
      </div>
      <div id="photo3" class="pic"><img src="img2/3.jpg">
	    <label for="back3"><div id="left3" class="b_left"><span>＜</span></div></label>
    	<label for="next3"><div id="right3" class="b_right"><span>＞</span></div></label>        
      </div>
      <div id="photo4" class="pic"><img src="img2/4.jpg">
    	<label for="back4"><div id="left4" class="b_left"><span>＜</span></div></label>
    	<label for="next4"><div id="right4" class="b_right"><span>＞</span></div></label>
      </div>
      <div id="photo5" class="pic"><img src="img2/5.jpg">
    	<label for="back5"><div id="left5" class="b_left"><span>＜</span></div></label>
    	<label for="next5"><div id="right5" class="b_right"><span>＞</span></div></label>
      </div>
    </div>
  </div>
</div>

HTMLの概要説明

・htmlは「左右スライド移動型」とまったく同じである。

表示用CSS

/* 表示画面 */
#stage {
	position: relative;
	width: 600px;
	height:338;
	margin: 0 auto;
}
/* 表示枠 */
#frame {
	width: 600px;
	height: 338px;
	position: relative;
	overflow: hidden;
}
/*全ての写真を水平一列に格納したdiv、#photosに,
スライドショーの基本の animation を設定*/
#photos {
	position:absolute;
	top:0;
	-webkit-animation: imgPassToLeft0 30s infinite;
	animation: imgPassToLeft0 30s infinite;
}
/*各写真の並び位置を設定*/
.rec {
	float:left;
	position:relative;
}
/* 全てのラジオボタンを非表示に */
#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5{
	display: none;
}
/*送りボタン文字（＜、＞）の設定*/
.b_left span, .b_right span {
	position: absolute;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 40px;
	font-weight: bold;
	opacity:0;
	top: 140px;
	color:#EEE;
}
.b_left span {
	left: 10px;
}
.b_right span {
	left: 560px;
}
/*ボタン文字hover時の設定*/
.pic:hover > label div span {
	opacity:1;
	color:#EEE;
}
.pic label div span:hover {
	color:#f00;
	cursor:pointer;
}
/* 各送りボタンクリック時のanimation設定 */
#next1:checked ~ #photos {
	animation: imgPassToLeft1 30s infinite;	
	animation-delay: -4.8s;
	-webkit-animation: imgPassToLeft1 30s infinite;	
	-webkit-animation-delay: -4.8s;
}
#next2:checked ~ #photos {
	animation: imgPassToLeft2 30s infinite;
	animation-delay: -10.8s;
	-webkit-animation: imgPassToLeft2 30s infinite;
	-webkit-animation-delay: -10.8s;
}
#next3:checked ~ #photos {
	animation: imgPassToLeft3 30s infinite;
	animation-delay: -16.8s;
	-webkit-animation: imgPassToLeft3 30s infinite;
	-webkit-animation-delay: -16.8s;
}
#next4:checked ~ #photos {
	animation: imgPassToLeft4 30s infinite;
	animation-delay: -22.8s;
	-webkit-animation: imgPassToLeft4 30s infinite;
	-webkit-animation-delay: -22.8s;
}
#next5:checked ~ #photos {
	animation: imgPassToLeft5 30s infinite;
	animation-delay: -28.8s;
	-webkit-animation: imgPassToLeft5 30s infinite;
	-webkit-animation-delay: -28.8s;
}
#back1:checked ~ #photos {
	animation: imgPassToRight1 30s infinite;
	animation-delay: -28.8s;
	-webkit-animation: imgPassToRight1 30s infinite;
	-webkit-animation-delay: -28.8s;
}
#back2:checked ~ #photos {
	animation: imgPassToRight2 30s infinite;
	animation-delay: -22.8s;
	-webkit-animation: imgPassToRight2 30s infinite;
	-webkit-animation-delay: -22.8s;
}
#back3:checked ~ #photos {
	animation: imgPassToRight3 30s infinite;
	animation-delay: -16.8s;
	-webkit-animation: imgPassToRight3 30s infinite;
	-webkit-animation-delay: -16.8s;
}
#back4:checked ~ #photos {
	animation: imgPassToRight4 30s infinite;
	animation-delay: -10.8s;
	-webkit-animation: imgPassToRight4 30s infinite;
	-webkit-animation-delay: -10.8s;
}
#back5:checked ~ #photos {
	animation: imgPassToRight5 30s infinite;
	animation-delay: -4.8s;
	-webkit-animation: imgPassToRight5 30s infinite;
	-webkit-animation-delay: -4.8s;
}
/* animation設定 */
@keyframes imgPassToLeft0 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@keyframes imgPassToLeft1 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@keyframes imgPassToLeft2 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@keyframes imgPassToLeft3 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@keyframes imgPassToLeft4 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@keyframes imgPassToLeft5 {
	0%  {   left:   0%;opacity:0;}
	4%  {   left:   0%;opacity:1;}
	16% {   left:   0%;opacity:1;}
	19.99%{ left:   0%;opacity:0;}
	20% {   left:-100%;opacity:0;}
	24% {   left:-100%;opacity:1;} 
	36% {   left:-100%;opacity:1;}
	39.99%{ left:-100%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-300%;opacity:0;}
	64% {   left:-300%;opacity:1;}
	76% {   left:-300%;opacity:1;} 
	79.99%{ left:-300%;opacity:0;}
	80% {   left:-400%;opacity:0;}
	84% {   left:-400%;opacity:1;}
	96% {   left:-400%;opacity:1;}
	99.99%{ left:-400%;opacity:0;}
	100% {  left:   0%;opacity:0;}
}
@keyframes imgPassToRight1 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}
@keyframes imgPassToRight2 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}
@keyframes imgPassToRight3 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}
@keyframes imgPassToRight4 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}
@keyframes imgPassToRight5 {
	0%  {   left:-400%;opacity:0;}
	4%  {   left:-400%;opacity:1;}
	16% {   left:-400%;opacity:1;}
	19.99%{ left:-400%;opacity:0;}
	20% {   left:-300%;opacity:0;}
	24% {   left:-300%;opacity:1;} 
	36% {   left:-300%;opacity:1;}
	39.99%{ left:-300%;opacity:0;}
	40% {   left:-200%;opacity:0;}
	44% {   left:-200%;opacity:1;}
	56% {   left:-200%;opacity:1;}
	59.99%{ left:-200%;opacity:0;}
	60% {   left:-100%;opacity:0;}
	64% {   left:-100%;opacity:1;}
	76% {   left:-100%;opacity:1;} 
	79.99%{ left:-100%;opacity:0;}
	80% {   left:   0%;opacity:0;}
	84% {   left:   0%;opacity:1;}
	96% {   left:   0%;opacity:1;}
	99.99%{ left:   0%;opacity:0;}
	100% {  left:-400%;opacity:0;}
}

CSSのポイント説明

・CSSも「左右スライド移動型」とほぼ同じであるが、animation の内容が、スライドの移動（瞬間移動）とフェイドイン・アウトの記述が混在している。
・この稿も、chrome用の@frame以下の記述が省略されているので、ベンダープレフィックス(-webkit-)をつけた記述を加える必要がある。
・ちょっと記述が長くなるので、外部cssファイルにして、それにリンクさせる使い方が、他のスクリプトのclassファイル的な使い方でいいのではないかと。

スライダー（FadeIN・Out 型） — 18件のコメント

望月孝彦 2014年9月9日 9:15 PM より:

参考にしていただいています。ありがとうございます。
勉強さになります。
レスポンシブルで作っれたらいいのになーと思います。
お時間がありましたらよろしくおねがいします。

返信 ↓
- Ellie 2016年7月26日 9:45 PM より:
  
  Your post is a timely cotibnrution to the debate
  
  返信 ↓
  - tyosbb 2016年7月27日 5:51 AM より:
    
    Thankn you for your comment.
    
    返信 ↓
tyosbb 2014年9月9日 9:50 PM より:

望月さん

　参考にしていただきありがとうございます。
　このSAMPLEでは、サイズ固定で制御していますので、レスポンシブルにはなりませんね。
　今後の課題とさせてください。

返信 ↓
山直竜馬 2014年12月4日 12:56 PM より:

参考にさせて頂いています。
このスライドショーがとても気に入りました。
是非私のホームページのトップにあるスライドショーで使わせて頂きたいと思っています。

そこで、少しお伺いしたい事がございます。
今回、私のスライドショーで使おうと思っている画像が主に「ショップの紹介」であったり、「商品画像」だったりします。

今、使ってらっしゃる画像は「山の風景画像」なので現在の仕様でとてもしっくりくるのですが、商品画像などの場合は「画面が完全に【白く】なってから次の画像」ではなく「画面が完全に【黒く】になってから次の画像」の方が合うのではないかと考えています。

ですので、可能出れば次の画像に移る時にブラックアウトするように変更したいのですが、どのようにすれば良いかご助言頂けませんでしょうか？(^_^;)よろしくお願い致します。

返信 ↓
- tyos 2014年12月4日 1:15 PM より:
  
  山直さん、参考になれば幸いです。
  
  さて、バックを黒にするには、CSSの記述で、
  #stage { } 内に以下の記述を加えてください。
  
  background:#000;
  
  これでブラックアウトするようになります。
  
  返信 ↓
  - 山直竜馬 2014年12月8日 8:38 PM より:
    
    返信ありがとうございました。
    参考にさせて頂きますm(_ _)m
    
    返信 ↓
かおり 2015年1月21日 9:16 AM より:

はじめまして！ホームページ作り初心者の者です。
ド素人の私にとってcssだけでつくるスライドショーが魔法のように見えます！笑
素晴らしい素材をありがとうございます！

fc2ネットショップで使わせていただきたいのですが、
なかなか作動せず困っています・・・。
左右写真送り型スライダーとフェイドイン・アウト型のスライドショーは動いたのですが・・・。
画像のサイズだけ980px　450pxに変えさせていただいてます！

よろしくおねがいします！

返信 ↓
- tyosbb 2015年1月21日 10:25 AM より:
  
  かおりさん、こんにちは。
  御社の在るあたりは、昔いろいろ探しながら歩き回った辺りで、懐かしいです。
  さて、送り形のスライダーが動いたのなら、こちらも動くはずですが、どのような状態なのでしょうか。
  写真のサイズを変えた場合には、それに応じて、#stage,#frameの、width,height を変えなければなりませんが、変えていますよね。
  
  返信 ↓
かおり 2015年1月26日 12:13 PM より:

ご返信ありがとうございます！
#stage,#frameの、width,height を変えて、画像のURLを変えただけなのですが、何が問題かさっぱりです・・＞＜

返信 ↓
- tyosbb 2015年1月26日 12:29 PM より:
  
  どのような状態ですか。それがわからなければ、何が問題かこちらにもわかりません。
  もし、ブラウザにChromeを使っているのでしたら、ベンダープレフィックス(-webkit-)をつけた記述を加える必要がありますが、されていますよね。
  
  返信 ↓
  - tyosbb 2015年1月26日 8:18 PM より:
    
    かおりさん
    続きのコメントがスライド移動型の方に入っていましたので、そちらで答えています。スライド移動型の方を見てください。
    
    返信 ↓
スギヤマ 2019年9月11日 10:47 AM より:

ホームページ作成初心者です。スライダー（FadeIN・Out 型）の記事について参考にさせて頂いております。どうもありがとうございます。

画像が３枚スライドするようなページを作成している途中なのですが、左送りボタン＜を押しても画像が順番通りに表示されません。右送りボタン＞と、アニメーションはうまく機能していると思います。しばらく取り組んでいるのですが自力で改善できません…。どんなことが原因だと考えられますか？
お教え頂ければ幸いです。

返信 ↓
- tyosbb 2019年9月11日 8:38 PM より:
  
  スギヤマさん、はじめまして。
  スライドを3枚にするには、トータルのanimation時間を、30sから18sに代えたり、animationの切換え刻みを、20％から33％に代えたりしなければなりませんが、その辺がきちんとできているでしょうか。
  また、animation-delay の値が、-16.8sまでとなります。
  以上ご検討ください。
  
  返信 ↓
  - スギヤマ 2019年9月11日 11:29 PM より:
    
    はじめまして。＾＾ご回答ありがとうございます。大変助かります。
    トータルのanimation時間を18sに変えたり、animation-delay の値を-16.8sまでにする作業は行いました。私が作ったアニメーションの切り替え刻みを見ていただけませんか？
    お手数おかけし、すみません。
    
    /* animation設定 */（抜粋）
    @keyframes imgPassToLeft0 {
    0% { left: 0%;opacity:0;}
    11.11% { left: 0%;opacity:1;}
    22.22% { left: 0%;opacity:1;}
    33.33%{ left: 0%;opacity:0;}
    34% { left:-100%;opacity:0;}
    44.44% { left:-100%;opacity:1;}
    55.55% { left:-100%;opacity:1;}
    66.66%{ left:-100%;opacity:0;}
    67% { left:-200%;opacity:0;}
    77.77% { left:-200%;opacity:1;}
    88.88% { left:-200%;opacity:1;}
    99.99%{ left:-200%;opacity:0;}
    100% { left: 0%;opacity:0;}
    
    返信 ↓
    - tyosbb 2019年9月12日 7:05 AM より:
      
      上記css、コピーミスだと思いますが、最後に}を付ければOKです。
      逆方向のcssを以下の様にすれば、正常に動くはずです。
      @keyframes imgPassToRight1 {
      0% { left: -200%;opacity:0;}
      11.11% { left: -200%;opacity:1;}
      22.22% { left: -200%;opacity:1;}
      33.33%{ left: -100%;opacity:0;}
      34% { left:-100%;opacity:0;}
      44.44% { left:-100%;opacity:1;}
      55.55% { left:-100%;opacity:1;}
      66.66%{ left:-100%;opacity:0;}
      67% { left:-0%;opacity:0;}
      77.77% { left:-0%;opacity:1;}
      88.88% { left:-0%;opacity:1;}
      99.99%{ left:-0%;opacity:0;}
      100% { left: -200%;opacity:0;}
      }
      ご検討ください。
      
      返信 ↓
スギヤマ 2019年9月12日 12:09 PM より:

できました！！！どうもありがとうございます。助かりましたああ！！＞＜

返信 ↓
- tyosbb 2019年9月12日 2:50 PM より:
  
  おめでとうございます。
  頑張られましたね。
  これからもご活用ください。
  
  返信 ↓

スライダー（FadeIN・Out 型）

サンプル

表示用ＨＴＭＬ

HTMLの概要説明

表示用CSS

CSSのポイント説明

コメント

スライダー（FadeIN・Out 型） — 18件のコメント

tyosbb へ返信するコメントをキャンセル

css だけで作るスライドショー・フォトギャラリー

css transition、animation 、transformの実践的活用

サンプル

表示用ＨＴＭＬ

HTMLの概要説明

表示用CSS

CSSのポイント説明

tyosbb へ返信する コメントをキャンセル

tyosbb へ返信するコメントをキャンセル