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

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

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

@@ Строка 1: / Строка 1: @@
-.wiki-ticker {
+.ticker {
-    position: relative;
      width: 100%;
-    height: 32px;
      overflow: hidden;
+    position: relative;
      white-space: nowrap;
 }
-.wiki-ticker > span {
+.ticker__track {
-     position: absolute;
+     display: inline-flex;
-    top: 50%;
+     width: max-content;
-     left: 100%;
+     animation: ticker-scroll 30s linear infinite;
-    transform: translateY(-50%);
-    white-space: nowrap;
-    opacity: 0;
-     animation-name: wiki-ticker-animation;
-    animation-duration: 60s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-}
-/* Первый текст */
-.wiki-ticker > span:nth-child(1) {
-    animation-delay: 0s;
-}
-/* Второй текст */
-.wiki-ticker > span:nth-child(2) {
-    animation-delay: -12s;
 }
-/* Третий текст */
+.ticker__track span {
-.wiki-ticker > span:nth-child(3) {
+    display: inline-block;
-     animation-delay: -24s;
+     flex-shrink: 0;
+    padding-right: 80px;
 }
-/* Четвёртый текст */
+@keyframes ticker-scroll {
-.wiki-ticker > span:nth-child(4) {
+     from {
-    animation-delay: -36s;
+         transform: translateX(100%);
-}
-/* Пятый текст */
-.wiki-ticker > span:nth-child(5) {
-    animation-delay: -48s;
-}
-@keyframes wiki-ticker-animation {
-% {
-        left: 100%;
-        transform: translateY(-50%);
-        opacity: 1;
-    }
-% {
-        left: 0;
-         transform: translate(-100%, -50%);
-        opacity: 1;
-    }
-.01% {
-        opacity: 0;
      }
-% {
+     to {
-         opacity: 0;
+         transform: translateX(-100%);
      }
 }