Вспышка двух текстов разной продолжительности на неопределенный срок с помощью CSS

Я хотел бы постоянно мигать между двумя разными словами, используя CSS. Когда первое видно, второго быть не должно и наоборот. Они не должны быть видны одновременно (чтобы не возникало и не исчезало).

Я попытался адаптировать ответы из здесь и здесь. Но это не совсем правильно, потому что слова часто накладываются друг на друга.

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.mask{
position:absolute;
-webkit-animation: blinker 140ms infinite;
}

.target{
position:absolute;
-webkit-animation: blinker 240ms infinite;
}
<p class="mask">MASK</p><p class="target">TARGET</p>

Использование animation-delay не работает, потому что оно применяет задержку к первой презентации, а не к последующим итерациям. Я прочитал здесь эта страница, но мне трудно адаптироваться к двум словам.

Кроме того, я не хочу, чтобы первая презентация задерживалась. Первое слово имеет, которое будет видно с самого начала.

Я думаю, вы ищете animation-delay. 240ms на .target только удлинит анимацию, заставляя ее перекрываться в половине случаев.

Mooshua 22.04.2022 20:32

@Mooshua Я посмотрел, но задержка применяется только к первой презентации, а не к последующим итерациям. css-tricks.com/css-keyframe-animation-delay-iterations

Xinyi 22.04.2022 21:00
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
2
2
31
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Есть несколько других подходов для достижения цели. Если вы не возражаете против использования псевдоэлементов, возможно, вот вариант. Я могу добавить больше позже, если вам не нужны псевдоэлементы.

.special-blinky {
  position: relative;
  font-size: 3rem;
  margin: 3rem;
}

.special-blinky:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: 'MASK';
  animation: blinky-special 1s linear infinite;
}


@keyframes blinky-special {
  50% { content: 'TARGET'}
}
<div class="special-blinky"></div>

это не работает, потому что оба слова представлены в течение 1 с, мне нужно, чтобы они были представлены в разной продолжительности.

Xinyi 22.04.2022 21:07

Я не думаю, что псевдоэлементы будут работать, потому что мне нужно, чтобы они работали для многих пар слов.

Xinyi 22.04.2022 21:09

@Xinyi Итак, вы просто хотите, чтобы одно слово было видимым дольше, чем другое?

Chris W. 22.04.2022 21:09

@Xinyi Если вы не возражаете против использования JS для этой задачи ... есть greensock.com - относительно простой в использовании с большим количеством документации. Это как флеш, но для JS. Вы можете создавать свои собственные пайплайны, задержки и т.д.

F. Müller 22.04.2022 21:09

Нет, greensock, вероятно, излишен для такой мелочи, если я понимаю визуальное требование, то это все еще не имеет большого значения с чистым css.

Chris W. 22.04.2022 21:10

@КрисВ. Ну, ты прав. Но я хотел бы сам знать, как бы вы сделали это в css, не сойдя при этом с ума. Не стесняйтесь удивлять меня :)

F. Müller 22.04.2022 21:14

@ F.Müller, есть несколько способов, Темани только что добавил один из них, который является действительным. Я, по-видимому, не понял конечной цели, когда первоначально ответил, лол.

Chris W. 22.04.2022 22:13
Ответ принят как подходящий

Вот идея с использованием сетки CSS и анимации order. Все, что вам нужно сделать, это настроить процент ключевых кадров и продолжительность

.blinky {
  display: grid;
  grid-template-rows: 1fr 0; /* 2 rows with the second having 0 height  */
  overflow: hidden; /* hide the overflow of the second row*/
  font-size: 3rem;
}
/* apply the animation to only the last element */
.blinky > span:last-child {
  animation: blink 2s linear infinite;
}
@keyframes blink {
  0%,
  69%  {order:0}
  70%,
  100% {order:-1}
}
<div class="blinky">
  <span>MASK</span>
  <span>TARGET</span>
</div>

Интересный и грамотный подход.

F. Müller 23.04.2022 10:32

Спасибо, похоже, это именно то, что мне нужно. Не могли бы вы немного рассказать о том, как бы я изменил проценты для разной продолжительности? например, если бы я хотел, чтобы первый был представлен в течение 24 мс, а второй - в течение 14 мс.

Xinyi 23.04.2022 21:18

Я изменил общую продолжительность анимации с 2 с на 38 мс и изменил проценты в ключевых кадрах с 69% и 70% на 37% и 38%, это правильно?

Xinyi 23.04.2022 21:27

@Xinyi да, продолжительность будет определять общее состояние обоих состояний, а процент позволит вам разделить время между обоими, учитывая, что 49%/50% дадут одинаковое время.

Temani Afif 23.04.2022 21:31

@TemaniAfif спасибо. Меня все еще немного смущают два средних процента, 69 и 70. Я думаю, это означает, что первый отображается в 69% случаев, но как насчет второго? скажем, если бы я изменил 70 на 90.

Xinyi 23.04.2022 21:42

@Xinyi у вас будет переход между 69% и 90%, но порядок не анимируется, поэтому изменение произойдет где-то между 69% и 90%. при использовании 69%/70% мы контролируем, когда произойдет переход между 69% и 70%, поэтому мы можем сказать, что это почти 70%

Temani Afif 23.04.2022 21:52

@TemaniAfif ах, теперь я понимаю.

Xinyi 23.04.2022 22:01

Другие вопросы по теме