User:JacobsDevelop/common.css: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
(Created page with ".testelem { background-color: pink; }")
 
No edit summary
Line 1: Line 1:
.testelem {
.slider .slide {
background-color: pink;
animation: slideshow 12.5s infinite;
}
.slider .slide:nth-child(1) {
  animation-delay: 0s;
}
 
.slider .slide:nth-child(2) {
  animation-delay: -2.5s;
}
 
.slider .slide:nth-child(3) {
  animation-delay: -5s;
}
 
.slider .slide:nth-child(4) {
  animation-delay: -7.5s;
}
 
.slider .slide:nth-child(5) {
  animation-delay: -10s;
}
 
 
@keyframes slideshow {
  0%, 16%, 100% {
    opacity: 1;
    animation-timing-function: ease;
    z-index: 0;
  }
  20% {
    opacity: 0;
    animation-timing-function: step-end;
    z-index: 0;
  }
  96% {
    opacity: 1;
    animation-timing-function: step-end;
    z-index: -1;
  }
}
}

Revision as of 11:37, 7 December 2023

.slider .slide {
 animation: slideshow 12.5s infinite;
}
 
.slider .slide:nth-child(1) {
   animation-delay: 0s;
}

.slider .slide:nth-child(2) {
   animation-delay: -2.5s;
}

.slider .slide:nth-child(3) {
   animation-delay: -5s;
}

.slider .slide:nth-child(4) {
   animation-delay: -7.5s;
}

.slider .slide:nth-child(5) {
   animation-delay: -10s;
}


@keyframes slideshow {
  0%, 16%, 100% {
    opacity: 1;
    animation-timing-function: ease;
    z-index: 0;
  }
  20% {
    opacity: 0;
    animation-timing-function: step-end;
    z-index: 0;
  }
  96% {
    opacity: 1;
    animation-timing-function: step-end;
    z-index: -1;
  }
}