Difference between revisions of "MediaWiki:Common.css"

m
m
Line 4: Line 4:
 
#slideshow {
 
#slideshow {
 
   text-align: center;
 
   text-align: center;
  overflow: hidden;
 
 
   height: 400px;
 
   height: 400px;
 
   width: 950px;
 
   width: 950px;
Line 12: Line 11:
 
.slide-wrapper {
 
.slide-wrapper {
 
   width: 950px;
 
   width: 950px;
  animation: 50s autoplay6 infinite linear;
 
 
}
 
}
  
Line 22: Line 20:
 
   width: 950px;
 
   width: 950px;
 
   opacity: 0.0;
 
   opacity: 0.0;
 +
  animation-name: pulse;
 +
  animation-duration: 50s;
 +
  animation-iteration-count: infinite;
 
}
 
}
  
 
+
 
 
 
.slide-number {
 
.slide-number {
 
   color: #000;
 
   color: #000;
Line 32: Line 32:
 
}
 
}
  
.slide-wrapper:nth-child(1) {animation-delay: 0s;}
+
.slide:nth-child(1){animation-delay: 0s}
.slide-wrapper:nth-child(2) {animation-delay: 5s;}
+
.slide:nth-child(2){animation-delay: 5s}
.slide-wrapper:nth-child(3) {animation-delay: 10s;}
+
.slide:nth-child(3){animation-delay: 10s}
.slide-wrapper:nth-child(4) {animation-delay: 15s;}
+
.slide:nth-child(4){animation-delay: 15s}
.slide-wrapper:nth-child(5) {animation-delay: 20s;}
+
.slide:nth-child(5){animation-delay: 20s}
.slide-wrapper:nth-child(6) {animation-delay: 25s;}
+
.slide:nth-child(6){animation-delay: 25s}
.slide-wrapper:nth-child(7) {animation-delay: 30s;}
+
.slide:nth-child(7){animation-delay: 30s}
.slide-wrapper:nth-child(8) {animation-delay: 35s;}
+
.slide:nth-child(8){animation-delay: 35s}
.slide-wrapper:nth-child(9) {animation-delay: 40s;}
+
.slide:nth-child(9){animation-delay: 40s}
.slide-wrapper:nth-child(10) {animation-delay: 45s;}
+
.slide:nth-child(10){animation-delay: 45s}
 
 
 
 
  
  
@keyframes autoplay6 {
+
@keyframes pulse {
   0% {opacity: 0.0}
+
   0% { opacity: 0.0; }
   1% {opacity: 1.0}
+
   1% { opacity: 1.0; }
   8% {opacity: 1.0}
+
   11% { opacity: 1.0; }
   9% {opacity: 0.0}
+
   12% { opacity: 0.0; }
   100% {opacity: 0.0}
+
   100% { opacity: 0.0; }
 
}
 
}

Revision as of 15:38, 26 July 2023

/* CSS placed here will be applied to all skins */


#slideshow {
  text-align: center;
  height: 400px;
  width: 950px;
  margin: 0 auto;
}

.slide-wrapper {
  width: 950px;
}

.slide {
  position: absolute; 
  top: 0; 
  left: 0;
  height: 400px;
  width: 950px;
  opacity: 0.0;
  animation-name: pulse;
  animation-duration: 50s;
  animation-iteration-count: infinite;
}

 
.slide-number {
  color: #000;
  text-align: center;
  font-size: 10em;
}

.slide:nth-child(1){animation-delay: 0s}
.slide:nth-child(2){animation-delay: 5s}
.slide:nth-child(3){animation-delay: 10s}
.slide:nth-child(4){animation-delay: 15s}
.slide:nth-child(5){animation-delay: 20s}
.slide:nth-child(6){animation-delay: 25s}
.slide:nth-child(7){animation-delay: 30s}
.slide:nth-child(8){animation-delay: 35s}
.slide:nth-child(9){animation-delay: 40s}
.slide:nth-child(10){animation-delay: 45s}


@keyframes pulse {
  0% { opacity: 0.0; }
  1% { opacity: 1.0; }
  11% { opacity: 1.0; }
  12% { opacity: 0.0; }
  100% { opacity: 0.0; }
}