body { background: #000; } 
 
#slidercontainer { 
  position: relative; 
  overflow: hidden; 
  background: #000 
}
#slidercontainer { 
  width: 768px;
  height: 341px; 
}
 
#css3slider img { 
  width: 768px;
  height: 341px; 
  float: left;
}
 
#css3slider { 
  position: absolute; 
  width:3900px;  
  -webkit-animation-name:slider;
  -webkit-animation-duration:15s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count:infinite;
  -moz-animation-name:slider;
  -moz-animation-duration:15s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count:infinite;
  -o-animation-name:slider;
  -o-animation-duration:15s;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count:infinite;
  animation-name:slider;
  animation-duration:15s;
  animation-timing-function: ease-in-out;
  animation-iteration-count:infinite;
}

@-webkit-keyframes slider {     
  0% { left: 0; opacity: 0; }     
  2% { opacity: 1; }     
  20% { left: 0; opacity: 1; }     
  21% { opacity: 0; }     
  24% { opacity: 0; }     
  25% { left: -768px; opacity: 1; }       
  45% { left: -768px; opacity: 1; }     
  46% { opacity: 0; }     
  48% { opacity: 0; }     
  50% { left: -1536px; opacity: 1; }     
  70% { left: -1536px; opacity: 1; }     
  72% { opacity: 0; }     
  74% { opacity: 0; }    
  75% { left: -2304px; opacity: 1; }   	
  95% { left: -2304px; opacity: 1; }   	
  97%  { left: -2304px; opacity: 0;}   	
  100% { left: 0; opacity: 0; }
} 
 
@-moz-keyframes slider {     
  0% { left: 0; opacity: 0; }     
  2% { opacity: 1; }     
  20% { left: 0; opacity: 1; }     
  21% { opacity: 0; }     
  24% { opacity: 0; }     
  25% { left: -768px; opacity: 1; }       
  45% { left: -768px; opacity: 1; }     
  46% { opacity: 0; }     
  48% { opacity: 0; }     
  50% { left: -1536px; opacity: 1; }     
  70% { left: -1536px; opacity: 1; }     
  72% { opacity: 0; }     
  74% { opacity: 0; }    
  75% { left: -2304px; opacity: 1; }   	
  95% { left: -2304px; opacity: 1; }   	
  97%  { left: -2304px; opacity: 0;}   	
  100% { left: 0; opacity: 0; }
} 
 
@-o-keyframes slider {     
  0% { left: 0; opacity: 0; }     
  2% { opacity: 1; }     
  20% { left: 0; opacity: 1; }     
  21% { opacity: 0; }     
  24% { opacity: 0; }     
  25% { left: -768px; opacity: 1; }     
  45% { left: -768px; opacity: 1; }     
  46% { opacity: 0; }     
  48% { opacity: 0; }     
  50% { left: -1536px; opacity: 1; }     
  70% { left: -1536px; opacity: 1; }     
  72% { opacity: 0; }     
  74% { opacity: 0; }    
  75% { left: -2304px; opacity: 1; }   	
  95% { left: -2304px; opacity: 1; }   	
  97%  { left: -2304px; opacity: 0; }   	
  100% { left: 0; opacity: 0; }
} 
 
@keyframes slider {     
  0% { left: 0; opacity: 0; }     
  2% { opacity: 1; }     
  20% { left: 0; opacity: 1; }     
  21% { opacity: 0; }     
  24% { opacity: 0; }     
  25% { left: -768px; opacity: 1; }     
  45% { left: -768px; opacity: 1; }     
  46% { opacity: 0; }     
  48% { opacity: 0; }     
  50% { left: -1536px; opacity: 1; }     
  70% { left: -1536px; opacity: 1; }     
  72% { opacity: 0; }     
  74% { opacity: 0; }    
  75% { left: -2304px; opacity: 1; }   	
  95% { left: -2304px; opacity: 1; }   	
  97%  { left: -2304px; opacity: 0; }   	
  100% { left: 0; opacity: 0; }
}
#css3slider:hover { 
  -webkit-animation-play-state:paused; 
  -moz-animation-play-state:paused; 
  -o-animation-play-state:paused; 
  animation-play-state:paused; }
}
 
#css3slider img { 
  float: right; 
}
 
#slidercontainer:after { 
  content: "❚❚"; 
  font-size: 150px; 
  position: absolute; 
  z-index: 12; 
  color: rgba(255,255,255, 0); 
  left: 300px; top: 80px; 
  -webkit-transition: 1s all ease-in-out; 
  -ms-transition: 1s all ease-in-out; 
  -moz-transition: 1s all ease-in-out; 
  -o-transition: 1s all ease-in-out; 
  transition: 1s all ease-in-out; 
}
 
#slidercontainer:hover:after { 
  color: rgba(255,255,255, 0.6);  
}