Как замедлить панорамирование фона при наведении в CSS

У меня есть фоновое панорамирование div, которое я хочу замедлить при наведении:

@keyframes backgroundScroll {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
div {
  width: 30vw;
  height: 30vh;
  background: repeating-linear-gradient(
    45deg,
    #EE0000,
    #EE0000 10px,
    #990000 10px,
    #990000 20px
  );
  background-size: 150%;
  background-position: 50% 50%;
  animation: backgroundScroll 3s linear infinite;
}
div:hover{
  animation: backgroundScroll 20s;
}

<div></div>

Теоретически что-то подобное должно работать, но не сохраняет состояние. Я пошел копать и обнаружил, что можно сохранить состояние анимации: StackOverflow-Изменить скорость анимации при наведении . После вскрытия я обнаружил, что он использует иллюзию, которая сводится к моим целям это. Мне интересно, есть ли способ применить это к исходному коду.

html css hover css-animations

31.05.2023 18:53

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

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

Ответы 6

Имейте в виду вот так:

@keyframes backgroundScroll {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes backgroundScrollHover {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

div {
  width: 30vw;
  height: 30vh;
  background: repeating-linear-gradient(
    45deg,
    #EE0000,
    #EE0000 10px,
    #999900 10px,
    #999000 20px
  );
  background-size: 150%;
  background-position: 50% 50%;
  animation: backgroundScroll 3s linear infinite;
}

div:hover {
  animation: backgroundScrollHover 20s linear infinite;
}

<div></div>

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

— 31.05.2023 22:53

31.05.2023 22:21

Мне удалось добиться визуального эффекта, поместив его в другой div (переполнение: скрыто) и применив анимацию наведения к самому прокручиваемому div.

Проблема с этим решением: прокручивается не только фон. Любое содержимое div также будет прокручиваться при наведении. Поэтому в зависимости от того, для чего вы собираетесь его использовать, он может быть не идеальным.

@keyframes backgroundScroll {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes scrollX {
  0% {
    margin-left: 0;
  }

  100% {
    margin-left: -30vw;
  }
}

.wrapper {
  width: 30vw;
  height: 30vh;
  overflow: hidden;
}

.scrolling {
  width: 90vw;
  height: 30vh;
  background:
    repeating-linear-gradient(45deg,
      #EE0000,
      #EE0000 10px,
      #990000 10px,
      #990000 20px);
  background-size: 150%;
  background-position: 50% 50%;
  animation-name: backgroundScroll, scrollX;
  animation-duration: 9s, 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running, paused;
}

.scrolling:hover {
  animation-play-state: running;
}

<div class = "wrapper">
  <div class = "scrolling">
  </div>
</div>

08.06.2023 08:42

Вы хотите, как это?

просто добавь анимация: нет;

или

  animation-play-state: paused;
  animation-fill-mode: forwards;

@keyframes backgroundScroll {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

div {
  width: 30vw;
  height: 30vh;
  background: repeating-linear-gradient(
    45deg,
    #EE0000,
    #EE0000 10px,
    #990000 10px,
    #990000 20px
  );
  background-size: 150%;
  background-position: 50% 50%;
  animation: backgroundScroll 3s linear infinite;
}

div:hover {
  animation: none;

}

<div></div>

Я хотел бы, чтобы он завис, а не просто полностью остановился.

— 08.06.2023 17:39

Этот метод также прыгает на mouseout.

— 12.06.2023 11:26

08.06.2023 09:29

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

Одна из возможностей - установить 2 разные анимации и приостановить одну из них.

@keyframes ScrollX {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: -28px;
  }
}
@keyframes ScrollY {
  0% {
    background-position-y: 0px;
  }
  100% {
    background-position-y: -28px;
  }
}

div {
  width: 30vw;
  height: 30vh;
  background: repeating-linear-gradient(
    45deg,
    #EE0000,
    #EE0000 10px,
    #990000 10px,
    #990000 20px
  );
  background-size: 150% 150%;
  background-position: 50% 50%;
  animation: ScrollX 1s linear infinite, ScrollY 1.5s linear infinite paused;
}
div:hover{
  animation: ScrollX 1s linear infinite, ScrollY 1.5s linear infinite;
}

<div></div>

чтобы избежать повторения, вы можете определить только animation-play-state: running при наведении

— 08.06.2023 23:55

08.06.2023 17:06

Идея похожа на ответ @vals, но я буду использовать перевод для ее достижения. Я использовал обычный множитель, чтобы вы могли легко контролировать скорость. Для первой анимации нужно число N, а для второй нужно использовать число с обратным знаком, чтобы уменьшить скорость.

Ниже я использую -3, и, добавляя к нему 2, я получаю -1, поэтому я перехожу от -3 к -1

div {
  width: 30vw;
  height: 30vh;
  position:relative;
  z-index: 0;
  overflow: hidden;
}
div:before {
  content:"";
  inset: 0 -100% 0;
  position: absolute;
  background: repeating-linear-gradient(
    45deg, #EE0000 0 10px, #990000 0 20px
  );
  --m: (1.414 * 20px); /* this is the multiplier for the speed */
  animation: 
   main  1s linear infinite, 
   brake 1s linear infinite paused;
}
div:hover:before {
   animation-play-state: running;
}

@keyframes main {
  to {
    transform: translate(calc(-3* var(--m)));
  }
}
@keyframes brake {
  to {
    translate: calc(2* var(--m)) 0;
  }
}

<div></div>

08.06.2023 23:52

Это то, что ты искал?

:root {
  --speed: 3s;
}

@keyframes backgroundScroll {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

div {
  width: 30vw;
  height: 30vh;
  background: repeating-linear-gradient(
    45deg,
    #EE0000,
    #EE0000 10px,
    #990000 10px,
    #990000 20px
  );
  background-size: 150%;
  background-position: 50% 50%;
  animation: backgroundScroll var(--speed) linear infinite;
}

div:hover{
  --speed: 15s;
}