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

@@ Строка 3: / Строка 3: @@
    white-space: nowrap;
    width: 100%;
-   box-sizing: border-box;
+   height: 1.8em;
+  line-height: 1.8em;
+  position: relative;
 }
-.marquee-inner {
-   display: inline-block;
+.marquee span {
-   padding-left: 100%;
+   position: absolute;
-   animation: marquee 20s linear infinite;
+   left: 0;
+  top: 0;
+   white-space: nowrap;
    color: #eaeaea;
+  animation: scroll 15s linear infinite;
+  opacity: 0;
 }
-@keyframes marquee {
-% { transform: translateX(0); }
+.marquee span:nth-child(1) { animation-delay: 0s; }
-% { transform: translateX(-100%); }
+.marquee span:nth-child(2) { animation-delay: 15s; }
+.marquee span:nth-child(3) { animation-delay: 30s; }
+.marquee span:nth-child(4) { animation-delay: 45s; }
+.marquee span:nth-child(5) { animation-delay: 60s; }
+@keyframes scroll {
+% {
+    transform: translateX(100%);
+    opacity: 1;
+  }
+% {
+    transform: translateX(-110%);
+    opacity: 1;
+  }
+%, 100% {
+    transform: translateX(-110%);
+    opacity: 0;
+  }
 }