CSSだけで作るスライドショー - スライドイン/アウト - 

/* グローバル変数の定義 */
:root {
 --delay: 3s; /* スライドショーの速度 */
}
/* 表示枠の定義 */
#frame {
 position: relative;
 margin: 0 auto;
 width : 100px;
 height: 140px;
 overflow: hidden;
}
#photo1,#photo2,#photo3,#photo4,#photo5 {
 position: absolute;
 width : 100px;
 height: 140px;
 background-size: 100% auto;
 float: left;
 left: 100px;
 -moz-animation: imgTrans calc(var(--delay) * 5) infinite;
 -webkit-animation: imgTrans calc(var(--delay) * 5) infinite;
 animation: imgTrans calc(var(--delay) * 5) infinite;
}
#photo1 {
 background-image: url("../../../img/cd_dvd/s/EICP-1579.gif");
 background-repeat: no-repeat;
 background-position: center center;
 -moz-animation-delay: 0s;
 -webkit-animation-delay: 0s;
 animation-delay: 0s;
}
#photo2 {
 background-image: url("../../../img/cd_dvd/s/TOBW-3120_21.gif");
 background-repeat: no-repeat;
 background-position: center center;
 -moz-animation-delay: var(--delay);
 -webkit-animation-delay: var(--delay);
 animation-delay: var(--delay);
}
#photo3 {
 background-image: url("../../../img/cd_dvd/s/MICP-11133.gif");
 background-repeat: no-repeat;
 background-position: center center;
 -moz-animation-delay: calc(var(--delay) * 2);
 -webkit-animation-delay: calc(var(--delay) * 2);
 animation-delay: calc(var(--delay) * 2);
}
#photo4 {
 background-image: url("../../../img/cd_dvd/s/TOBW-3057_58.gif");
 background-repeat: no-repeat;
 background-position: center center;
 -moz-animation-delay: calc(var(--delay) * 3);
 -webkit-animation-delay: calc(var(--delay) * 3);
 animation-delay: calc(var(--delay) * 3);
}
#photo5 {
 background-image: url("../../../img/cd_dvd/s/WPCR-867.gif");
 background-repeat: no-repeat;
 background-position: center center;
 -moz-animation-delay: calc(var(--delay) * 4);
 -webkit-animation-delay: calc(var(--delay) * 4);
 animation-delay: calc(var(--delay) * 4);
}
/* スライド切替animation設定 */
@-webkit-keyframes imgTrans {
 0%   { left:  100%; }
 5%   { left:    0%; }
 20%  { left:    0%; }
 25%  { left: -100%; }
 100% { left: -100%; }
}
@-moz-keyframes imgTrans {
 0%   { left:  100%; }
 5%   { left:    0%; }
 20%  { left:    0%; }
 25%  { left: -100%; }
 100% { left: -100%; }
}
@keyframes imgTrans {
 0%   { left:  100%; }
 5%   { left:    0%; }
 20%  { left:    0%; }
 25%  { left: -100%; }
 100% { left: -100%; }
}