Шаблон:Бегущая строка/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;
-   top: 0;
+   width: 100%;
-   left: 0;
+  animation: vertical-scroll 16s cubic-bezier(0.4, 0, 0.2, 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 14s linear infinite;
 }
-.marquee span:nth-child(1) { animation-delay: 0s; }
+@keyframes vertical-scroll {
-.marquee span:nth-child(2) { animation-delay: 14s; }
+%, 18%   { transform: translateY(0); }
-.marquee span:nth-child(3) { animation-delay: 28s; }
+%, 40%  { transform: translateY(-2.2em); }
-.marquee span:nth-child(4) { animation-delay: 42s; }
+%, 62%  { transform: translateY(-4.4em); }
-.marquee span:nth-child(5) { animation-delay: 56s; }
+%, 84%  { transform: translateY(-6.6em); }
+%, 100% { transform: translateY(-8.8em); }
-@keyframes scroll {
-% {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-% {
-    opacity: 1;
-  }
-% {
-    transform: translateX(-110%);
-    opacity: 1;
-  }
-% {
-    opacity: 0;
-  }
-% {
-    transform: translateX(-110%);
-    opacity: 0;
-  }
 }