Анимация скольжения текста в CSS

Я хотел бы создать что-то подобное: https://codepen.io/marklc44/pen/RKPdEV. Но при наличии 6 элементов анимацию нужно воспроизводить 3 раза, а затем останавливать на последнем элементе, используя только CSS.

В приведенном ниже примере только элементы с тремя элементами.

h3>.centered-container span {
  animation: vertical 7.5s linear 3 forwards;
  -ms-animation: vertical 7.5s linear 3 forwards;
  -webkit-animation: vertical 7.5s linear 3 forwards;
  position: absolute;
  opacity: 0;
}

h3>.centered-container span:nth-child(2) {
  -webkit-animation-delay: 2.5s;
  -ms-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

h3>.centered-container span:nth-child(3) {
  animation: vertical 7.5s linear 5s forwards 3, vertical-last 20000.5s 20.5s 1;
}

@keyframes vertical {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    transform: translateY(-5px);
  }
  10% {
    opacity: 1;
    transform: translateY(0px);
  }
  30% {
    opacity: 1;
    transform: translateY(0px);
  }
  40% {
    opacity: 0;
    transform: translateY(5px);
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes vertical-last {
  0% {
    opacity: 1;
    transform: translateY(0);
    top: 0px;
  }
  2% {
    opacity: 1;
    transform: translateY(0);
    top: 0px;
  }
  10% {
    opacity: 1;
    transform: translateY(0);
    top: 0px;
  }
  30% {
    opacity: 1;
    transform: translateY(0px);
  }
}

<h3>This<br>
  <div class = "centered-container"> is   <span>one</span>
    <span>two</span>
    <span>three</span>
  </div>
</h3>

К вашему сведению, вам не нужны вендорные префиксы для анимации или анимации-задержки.

— 04.04.2024 22:12

Хорошее начало, но вы не задали вопрос. Вы только что описали свои требования. Пожалуйста, ознакомьтесь с разделом Как спрашивать, а затем измените заголовок, чтобы задать что-то четкое и конкретное.

— 04.04.2024 22:34

html css css-animations

04.04.2024 22:03

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это довольно сложно сделать, используя только CSS. Но это возможно... Самый простой способ - продублировать слайды. Я также использовал генератор , который когда-то создал сам.
Итак, вот как вы можете это сделать:

.centered-container {
  display: flex;
  gap: .25em;
}

.slider{
  overflow: hidden;
  position: relative;
  flex: auto;
}

.slide {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  height: 100%;
  transform: translateY(-100%);
}

.slide:last-child {
  transform: none;
}

.slide:nth-child(1) {
  animation: slide1 10s ;
}
@keyframes slide1 {
  0% { transform: translateY(100%); }
  2.2222222222222223%, 8.88888888888889% { transform: translateX(0); }
  11.11111111111111%, 100% { transform: translateY(-100%); }
}
        
.slide:nth-child(2) {
  animation: slide2 10s ;
}
@keyframes slide2 {
  0%, 11.11111111111111% { transform: translateY(100%); }
  13.333333333333332%, 20% { transform: translateX(0); }
  22.22222222222222%, 100% { transform: translateY(-100%); }
}
        
.slide:nth-child(3) {
  animation: slide3 10s ;
}
@keyframes slide3 {
  0%, 22.22222222222222% { transform: translateY(100%); }
  24.444444444444443%, 31.111111111111107% { transform: translateX(0); }
  33.33333333333333%, 100% { transform: translateY(-100%); }
}
        
.slide:nth-child(4) {
  animation: slide4 10s ;
}
@keyframes slide4 {
  0%, 33.33333333333333% { transform: translateY(100%); }
  35.55555555555555%, 42.22222222222222% { transform: translateX(0); }
  44.44444444444444%, 100% { transform: translateY(-100%); }
}
        
.slide:nth-child(5) {
  animation: slide5 10s ;
}
@keyframes slide5 {
  0%, 44.44444444444444% { transform: translateY(100%); }
  46.666666666666664%, 53.333333333333336% { transform: translateX(0); }
  55.55555555555556%, 100% { transform: translateY(-100%); }
}
        
.slide:nth-child(6) {
  animation: slide6 10s ;
}
@keyframes slide6 {
  0%, 55.55555555555556% { transform: translateY(100%); }
  57.77777777777778%, 64.44444444444444% { transform: translateX(0); }
  66.66666666666667%, 100% { transform: translateY(-100%); }
}
        
.slide:nth-child(7) {
  animation: slide7 10s ;
}
@keyframes slide7 {
  0%, 66.66666666666667% { transform: translateY(100%); }
  68.8888888888889%, 75.55555555555556% { transform: translateX(0); }
  77.77777777777779%, 100% { transform: translateY(-100%); }
}
        
.slide:nth-child(8) {
  animation: slide8 10s ;
}
@keyframes slide8 {
  0%, 77.77777777777779% { transform: translateY(100%); }
  80.00000000000001%, 86.66666666666667% { transform: translateX(0); }
  88.8888888888889%, 100% { transform: translateY(-100%); }
}
        
.slide:nth-child(9) {
  animation: slide9 10s ;
}
@keyframes slide9 {
  0%, 88.8888888888889% { transform: translateY(100%); }
  91.11111111111113%, 97.77777777777779% { transform: translateX(0); }
  100.00000000000001%, 100% { transform: translateY(-100%); }
}

<h3 class = "centered-container">
  This is
  <div class = "slider">
    <span class = "slide">one</span>
    <span class = "slide">two</span>
    <span class = "slide">three</span>
    <span class = "slide">one</span>
    <span class = "slide">two</span>
    <span class = "slide">three</span>
    <span class = "slide">one</span>
    <span class = "slide">two</span>
    <span class = "slide">three</span>
  </div>
</h3>

04.04.2024 23:19

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

Невозможно переместить SVG в центр экрана

Выровняйте фотографию по элементу div и сохраните отзывчивость

Пытаюсь найти и нажать элемент кнопки, но Selenium Webdriver вызывает исключение NoSuchElementException

Строка, подобная div, внутри гибкой среды с повернутым заголовком в начале

Создание собственного всплывающего окна, которое меняет высоту в зависимости от содержимого и при необходимости добавляет полосу прокрутки

Как сделать положение модального окна статическим при масштабировании или изменении размера экрана

Ошибка оформления CSS текста в WebKit

Исключить разделитель MUI после последнего пункта меню

Стол обрезается снизу

Встроенный блок игнорируется из-за плавающей точки?

Анимация скольжения текста в CSS

Ответы 1

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

Похожие вопросы