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

@@ Строка 1: / Строка 1: @@
-.running-text {
+.marquee {
-    width: 100%;
+  overflow: hidden;
-    height: 30px;
+  white-space: nowrap;
-    overflow: hidden;
+  width: 100%;
-    position: relative;
+  height: 2em;
-    white-space: nowrap;
+  line-height: 2em;
+  position: relative;
 }
-.running-text__content {
+.marquee span {
-    position: absolute;
+  position: absolute;
-    left: 100%;
+  top: 0;
-    top: 50%;
+  left: 0;
-    transform: translateY(-50%);
+  white-space: nowrap;
-    white-space: nowrap;
+  color: #eaeaea;
-    animation: running-text-scroll 10s linear infinite;
+  opacity: 0;
+  animation: scroll 16s linear infinite;
 }
-@keyframes running-text-scroll {
+.marquee span:nth-child(1) { animation-delay: 0s; }
-    from {
+.marquee span:nth-child(2) { animation-delay: 16s; }
-        left: 100%;
+.marquee span:nth-child(3) { animation-delay: 32s; }
-    }
+.marquee span:nth-child(4) { animation-delay: 48s; }
+.marquee span:nth-child(5) { animation-delay: 64s; }
-     to {
+@keyframes scroll {
-        left: -100%;
+% {
-     }
+     transform: translateX(100%);
+    opacity: 0;
+  }
+% {
+    opacity: 1;
+  }
+% {
+    transform: translateX(-120%);
+    opacity: 1;
+  }
+% {
+    opacity: 0;
+  }
+% {
+    transform: translateX(-120%);
+     opacity: 0;
+  }
 }