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

Интерактивная навигация по истории

← Предыдущая правка Следующая правка →

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