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

@@ Строка 1: / Строка 1: @@
 .marquee {
    overflow: hidden;
-   height: 2.2em;
+  white-space: nowrap;
-   line-height: 2.2em;
+  width: 100%;
+   height: 2em;
+   line-height: 2em;
    position: relative;
-  width: 100%;
 }
-.marquee-inner {
+.marquee span {
    position: absolute;
-   width: 100%;
+   top: 0;
-   animation: scroll 15s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+  left: 0;
+  white-space: nowrap;
+  color: #eaeaea;
+  opacity: 0;
+   animation: scroll 14s linear infinite;
 }
-.marquee-inner span {
+.marquee span:nth-child(1) { animation-delay: 0s; }
-  display: block;
+.marquee span:nth-child(2) { animation-delay: 14s; }
-  height: 2.2em;
+.marquee span:nth-child(3) { animation-delay: 28s; }
-  line-height: 2.2em;
+.marquee span:nth-child(4) { animation-delay: 42s; }
-  color: #eaeaea;
+.marquee span:nth-child(5) { animation-delay: 56s; }
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
 @keyframes scroll {
-%, 20%   { transform: translateY(0); }
+% {
-%, 45%  { transform: translateY(-2.2em); }
+    transform: translateX(100%);
-%, 70%  { transform: translateY(-4.4em); }
+    opacity: 0;
-%, 95%  { transform: translateY(-6.6em); }
+  }
-%      { transform: translateY(-8.8em); }
+% {
+    opacity: 1;
+  }
+% {
+    transform: translateX(-110%);
+    opacity: 1;
+  }
+% {
+    opacity: 0;
+  }
+% {
+    transform: translateX(-110%);
+    opacity: 0;
+  }
 }