slideshow

/* http://www.creativejuiz.fr/trytotry/juizy-slideshow-full-css3-html5/ */

@keyframes slider {
  0%, 20%, 100% { left: 0 }
  25%, 45%    { left: -100% }
  50%, 70%    { left: -200% }
  75%, 95%    { left: -300% }
}

#slideshow .slider {
  animation: slider 32s infinite;
}

@keyframes figurer {
  0%, 25%, 50%, 75%, 100%           { box-shadow: 0 0 65px rgba(0,0,0, 0) inset;  }
  5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%   { box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
}

#slideshow figure:after {
  animation: figurer 32s infinite;
}

@keyframes figcaptionner {
  0%, 25%, 50%, 75%, 100%           { bottom: -55px;  }
  5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%   { bottom: 5px;    }
}

#slideshow figcaption {
  animation: figcaptionner 32s infinite;
}

@keyframes timeliner {
  0%, 25%, 50%, 75%, 100% { width: 0;   }
  20%, 45%, 70%, 90%    { width: 640px; }
}

#timeline {
  animation: timeliner 32s infinite;
}

@keyframes dotser {
  0%, 100%  { opacity: 1; left: 0;    }

  20%     { opacity: 1; left: 0;    }
  22%     { opacity: 0; left: 0;    }
  23%     { opacity: 0; left: 18px; }
  25%     { opacity: 1; left: 18px; }

  45%     { opacity: 1; left: 18px; }
  47%     { opacity: 0; left: 18px; }
  48%     { opacity: 0; left: 36px; }
  50%     { opacity: 1; left: 36px; }

  70%     { opacity: 1; left: 36px; }
  72%     { opacity: 0; left: 36px; }
  73%     { opacity: 0; left: 54px; }
  75%     { opacity: 1; left: 54px; }

  95%     { opacity: 1; left: 54px; }
  97%     { opacity: 0; left: 54px; }
  98%     { opacity: 0; left: 0;  }
}

.dots_commands li:first-child a:after {
  animation: dotser 32s infinite;
}

.dots_commands li:first-child a:before {
  display:none;
}

.sl_command { display: none; }

.sl_command:target ~ #slideshow .slider,
.sl_command:target ~ #slideshow figure:after,
.sl_command:target ~ #slideshow figcaption,
.sl_command:target ~ #slideshow #timeline,
.sl_command:target ~ #slideshow .dots_commands li:first-child a:after {
  animation-play-state: paused;
}

#sl_play:target ~ #slideshow .slider,
#sl_play:target ~ #slideshow figure:after,
#sl_play:target ~ #slideshow figcaption,
#sl_play:target ~ #slideshow #timeline,
#sl_play:target ~ #slideshow .dots_commands li:first-child a:after {
  animation-play-state: running;
}

.sl_command:target ~ #slideshow .pause  { opacity:0; }
.sl_command:target ~ #slideshow .play   { opacity:1; right: 25px; cursor: pointer; }
#sl_play:target ~ #slideshow .pause   { opacity:0; }
#sl_play:target ~ #slideshow .play    { opacity:0; right: 55px; cursor: default;}

.sl_i:target ~ #slideshow .slider                 { visibility: hidden }
.sl_i:target ~ #slideshow .slider figcaption            { visibility: hidden }
.sl_i:target ~ #slideshow .dots_commands li:first-child a:after   { display:none; }
.sl_i:target ~ #slideshow .dots_commands li:first-child a:before  { display:block; }}

#sl_i1:target ~ #slideshow .commands                { display: none; }
#sl_i1:target ~ #slideshow .commands1               { display: block; }
#sl_i1:target ~ #slideshow .c_slider                { background-position: 0 0, 640px 0, 1280px 0, 1920px 0; }
#sl_i1:target ~ #slideshow .dots_commands li:first-child a:before { left:0; }

#sl_i2:target ~ #slideshow .commands                { display: none; }
#sl_i2:target ~ #slideshow .commands2               { display: block; }
#sl_i2:target ~ #slideshow .c_slider                { background-position: -640px 0, 0 0, 640px 0, 1280px 0; }
#sl_i2:target ~ #slideshow .dots_commands li:first-child a:before { left:18px; }

#sl_i3:target ~ #slideshow .commands                { display: none; }
#sl_i3:target ~ #slideshow .commands3               { display: block; }
#sl_i3:target ~ #slideshow .c_slider                { background-position: -1280px 0, -640px 0, 0 0, 640px 0; }
#sl_i3:target ~ #slideshow .dots_commands li:first-child a:before { left:36px; }