Pure CSS Slider

# Pure CSS Slider

[`demo`](http://bl.ocks.org/feo52/raw/346b530cf7daf8369092/)
[`code`](https://gist.github.com/feo52/346b530cf7daf8369092)

#### SCSS

```scss
/* ------------------------------------------------------------------------- */
/* Pure CSS Slider                                                           */
/* ------------------------------------------------------------------------- */
// -----------------------------------------------------------//
// Settings                                                   //
// ---------------------------------------------------------- //
$iImage    : 6;                     // 画像枚数
$iImageTime: 3;                     // 描画秒数
$iTotalTime: $iImageTime * $iImage;
$iShiftTime: 1;                     // 遷移秒数
$iSlideInit: 1;                     // 開始時に 0:Hide / 1:Show
$iImageYoko: 160px;                 // 画像横幅
$iImageTate: 120px;                 // 画像縦幅
$strSliderClassName: ".slider";
$strSliderKeyframes:  "slider";
/* ---------------------------------------------------------- */
/* Container                                                  */
/* ---------------------------------------------------------- */
#{ $strSliderClassName } {
	display: inline-block;
	position: relative;
	overflow: hidden;
	width:  #{ $iImageYoko };
	height: #{ $iImageTate };
}
#{ $strSliderClassName } > a {
	width:  100%;
	height: 100%;
}
#{ $strSliderClassName } img {
	width:  100%;
	height: auto;
}
/* ---------------------------------------------------------- */
/* Initial                                                    */
/* ---------------------------------------------------------- */
#{ $strSliderClassName } #{ $strSliderClassName }L { position: absolute; left:-100%; }
#{ $strSliderClassName } #{ $strSliderClassName }T { position: absolute; top: -100%; }
#{ $strSliderClassName } #{ $strSliderClassName }X { position: absolute; transform: translateX(-100%); }
#{ $strSliderClassName } #{ $strSliderClassName }Y { position: absolute; transform: translateY(-100%); }
#{ $strSliderClassName } #{ $strSliderClassName }O { position: absolute; opacity: 0; visibility: hidden; }
/* ---------------------------------------------------------- */
/* Animation                                                  */
/* ---------------------------------------------------------- */
@for $i from 1 to $iImage + 1 {
	#{ $strSliderClassName } #{ $strSliderClassName }L:nth-of-type(#{$i}) {
		animation: #{ $strSliderKeyframes }L #{ $iTotalTime }s ease #{ $iImageTime * ($i - 1) - $iShiftTime * $iSlideInit }s infinite;
	}
}
@for $i from 1 to $iImage + 1 {
	#{ $strSliderClassName } #{ $strSliderClassName }T:nth-of-type(#{$i}) {
		animation: #{ $strSliderKeyframes }T #{ $iTotalTime }s ease #{ $iImageTime * ($i - 1) - $iShiftTime * $iSlideInit }s infinite;
	}
}
@for $i from 1 to $iImage + 1 {
	#{ $strSliderClassName } #{ $strSliderClassName }X:nth-of-type(#{$i}) {
		animation: #{ $strSliderKeyframes }X #{ $iTotalTime }s ease #{ $iImageTime * ($i - 1) - $iShiftTime * $iSlideInit }s infinite;
	}
}
@for $i from 1 to $iImage + 1 {
	#{ $strSliderClassName } #{ $strSliderClassName }Y:nth-of-type(#{$i}) {
		animation: #{ $strSliderKeyframes }Y #{ $iTotalTime }s ease #{ $iImageTime * ($i - 1) - $iShiftTime * $iSlideInit }s infinite;
	}
}
@for $i from 1 to $iImage + 1 {
	#{ $strSliderClassName } #{ $strSliderClassName }O:nth-of-type(#{$i}) {
		animation: #{ $strSliderKeyframes }O #{ $iTotalTime }s ease #{ $iImageTime * ($i - 1) - $iShiftTime * $iSlideInit }s infinite;
	}
}
/* ---------------------------------------------------------- */
/* Keyframes                                                  */
/* ---------------------------------------------------------- */
@keyframes #{ $strSliderKeyframes }L {
	                                                   0%{left:-100%;}
	#{ ($iShiftTime              ) / $iTotalTime * 100 }%{left:   0%;}
	#{ ($iImageTime              ) / $iTotalTime * 100 }%{left:   0%;}
	#{ ($iImageTime + $iShiftTime) / $iTotalTime * 100 }%{left: 100%;}
	                                                 100%{left: 100%;}
}
@keyframes #{ $strSliderKeyframes }T {
	                                                   0%{top: -100%;}
	#{ ($iShiftTime              ) / $iTotalTime * 100 }%{top:    0%;}
	#{ ($iImageTime              ) / $iTotalTime * 100 }%{top:    0%;}
	#{ ($iImageTime + $iShiftTime) / $iTotalTime * 100 }%{top:  100%;}
	                                                 100%{top:  100%;}
}
@keyframes #{ $strSliderKeyframes }X {
	                                                   0%{ transform: translateX(-100%);}
	#{ ($iShiftTime              ) / $iTotalTime * 100 }%{ transform: translateX(   0%);}
	#{ ($iImageTime              ) / $iTotalTime * 100 }%{ transform: translateX(   0%);}
	#{ ($iImageTime + $iShiftTime) / $iTotalTime * 100 }%{ transform: translateX( 100%);}
	                                                 100%{ transform: translateX( 100%);}
}
@keyframes #{ $strSliderKeyframes }Y {
	                                                   0%{ transform: translateY(-100%);}
	#{ ($iShiftTime              ) / $iTotalTime * 100 }%{ transform: translateY(   0%);}
	#{ ($iImageTime              ) / $iTotalTime * 100 }%{ transform: translateY(   0%);}
	#{ ($iImageTime + $iShiftTime) / $iTotalTime * 100 }%{ transform: translateY( 100%);}
	                                                 100%{ transform: translateY( 100%);}
}
@keyframes #{ $strSliderKeyframes }O {
	                                                   0%{opacity: 0; visibility: hidden;}
	#{ ($iShiftTime              ) / $iTotalTime * 100 }%{opacity: 1; visibility:visible;}
	#{ ($iImageTime              ) / $iTotalTime * 100 }%{opacity: 1; visibility:visible;}
	#{ ($iImageTime + $iShiftTime) / $iTotalTime * 100 }%{opacity: 0; visibility: hidden;}
	                                                 100%{opacity: 0; visibility: hidden;}
}
/* ---------------------------------------------------------- */
/* Reference                                                  */
/* Minimal pure css slider                                    */
/* https://codepen.io/eltonkamami/pen/hjBrE                   */
/* ---------------------------------------------------------- */
```

SCSS CSS Convert : [SassMeister](https://www.google.co.jp/search?q=SassMeister)