Шаблон:Реклама текст/styles.css

.aeon-fly {
  position: relative;
  display: block;
  height: 100px;
  margin: 10px 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  text-align: center;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #ffffff;
  line-height: 1;
}

.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: 0;
  animation-name: aeon-down;
}

.aeon-fly-mid {
  top: 50px;
  animation-name: aeon-mid;
}

.aeon-fly-bot {
  top: 68px;
  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); }
}