Шаблон:Бегущая строка/styles.css: различия между версиями

Нет описания правки
Нет описания правки
Строка 1: Строка 1:
.marquee {
.marquee {
  display: block;
   overflow: hidden;
   overflow: hidden;
   white-space: nowrap;
   white-space: nowrap;
   width: 100%;
   width: 100%;
   height: 1.6em;
   box-sizing: border-box;
  line-height: 1.6em;
  position: relative;
}
}
 
.marquee-inner {
.marquee-item {
   display: inline-block;
   position: absolute;
   padding-left: 100%;
   left: 100%;
   animation: marquee 20s linear infinite;
  white-space: nowrap;
   animation: marquee 12s linear infinite;
   color: #eaeaea;
   color: #eaeaea;
}
}
.marquee-item:nth-child(1) { animation-delay: 0s; }
.marquee-item:nth-child(2) { animation-delay: 12s; }
.marquee-item:nth-child(3) { animation-delay: 24s; }
.marquee-item:nth-child(4) { animation-delay: 36s; }
.marquee-item:nth-child(5) { animation-delay: 48s; }
@keyframes marquee {
@keyframes marquee {
   0%   { transform: translateX(0); opacity: 1; }
   0% { transform: translateX(0); }
   70% { transform: translateX(-120%); opacity: 1; }
   100% { transform: translateX(-100%); }
  75%  { opacity: 0; }
  100% { transform: translateX(-120%); opacity: 0; }
}
}