Jump to content

User:4erospace/common.css: Difference between revisions

CSS test
m CSS test
Line 1: Line 1:
/* Core functionality */
.marquee {
#animated-text-strip{
   margin: 0 auto;
   display: flex;
   white-space: nowrap;
   flex-flow: row nowrap;
  align-items: center;
   overflow: hidden;
   overflow: hidden;
  position: absolute;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 5s linear infinite;
}
}
#animated-text-strip .marquee {
 
  white-space: nowrap;
.marquee2 span {
   animation: marquee 10s linear infinite;
   animation-delay: 2.5s;
  max-width: none;
}
}


Line 19: Line 23:
     transform: translate(-100%, 0);
     transform: translate(-100%, 0);
   }
   }
}
/* Styles for the sake of the demonstration */
#animated-text-strip{
  background:black;
  padding: 1rem 0;
}
.marquee{
  font-family: 'Open Sans', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  color: white;
}
}

Revision as of 05:57, 17 June 2025

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 5s linear infinite;
}

.marquee2 span {
  animation-delay: 2.5s;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}