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

Версия от 23:33, 22 сентября 2026

.aeon-fly {
  position: relative;
  display: block;
  height: 110px; /* немного увеличил высоту под 3 строки */
  margin: 20px 0;
  background: none;
  border: none;
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ffffff;
}

.aeon-fly-top,
.aeon-fly-mid,
.aeon-fly-bot {
  position: absolute;
  left: 0;
  width: 100%;
  white-space: nowrap;
  background: none;
  animation-duration: 8s;
  animation-timing-function: cubic-bezier(0.16, 0.84, 0.22, 1);
  animation-iteration-count: infinite;
}

.aeon-fly-top {
  top: 4px;
  animation-name: aeon-down;
}

.aeon-fly-mid {
  top: 38px;
  animation-name: aeon-mid; /* средняя строка просто появляется */
}

.aeon-fly-bot {
  top: 72px;
  animation-name: aeon-up;
}

@keyframes aeon-down {
  0% { opacity: 0; transform: translateY(-80px); }
  12% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; transform: translateY(0); }
  82% { opacity: 0; transform: translateY(-80px); }
  100% { opacity: 0; transform: translateY(-80px); }
}

@keyframes aeon-mid {
  0% { opacity: 0; transform: scale(0.9); }
  12% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; transform: scale(1); }
  82% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(0.9); }
}

@keyframes aeon-up {
  0% { opacity: 0; transform: translateY(80px); }
  12% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; transform: translateY(0); }
  82% { opacity: 0; transform: translateY(80px); }
  100% { opacity: 0; transform: translateY(80px); }
}