2023年6月1日 00:53:48go评论63阅读模式

英文:

How to slow background pan on hover in 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;
}

理论上，类似这样的代码可以工作，但它不能保留状态。我进行了深入研究，并发现可以保留动画状态：StackOverflow-Change Animation speed on hover。经过分析，我发现它使用了一个视觉效果，对我来说可以简化为这个。我想知道是否有办法将这个效果应用到原始代码中。

英文:

I have a div background pan that I want to slow on hover:

@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;
}

&lt;div&gt;&lt;/div&gt;

In theory, something like this would work, but it doesen't retain the state. I went digging and found it is possible to retain the animation state: StackOverflow-Change Animation speed on hover. After disection, I found it uses an illusion, which reduced to my purposes is this. I am wondering if there is a way to apply this to the original code.

答案1

得分: 6

以下是翻译好的部分：

"一种可能性是设置两种不同的动画，并暂停其中一个"

@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>

希望这对你有所帮助。如果有其他问题，请随时提出。

英文:

One posibility is to set 2 different animations, and pause one of them

@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;
}

&lt;div&gt;&lt;/div&gt;

答案2

得分: 2

我通过将其包装在另一个 div 中（overflow: hidden）并对滚动 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>

英文:

I managed to achieve the visual effect by wrapping it in another div (overflow: hidden) and applying a hover animation to the scrolling div itself.

The problem with this solution: it's not just the background that's scrolling. Any of the div's contents would also be scrolling on hover. So depending on what you're going to use it for, it might not be perfect.

@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;
}

&lt;div class=&quot;wrapper&quot;&gt;
  &lt;div class=&quot;scrolling&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;

答案3

得分: 2

与@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); /* 这是速度的乘数 */
  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 {
    transform: translate(calc(2* var(--m)) 0);
  }
}

<div></div>

请注意，以上为代码部分的翻译。

英文:

A similar idea to @vals answer but I will use translation to achieve it. I used a common multiplier so you can easily control the speed. The first animation need a number N while the second one need to use a number with an opposite sign to decrease the speed.

Below I am using -3 and by adding 2 to it I get -1 so I go from -3 to -1

div {
  width: 30vw;
  height: 30vh;
  position:relative;
  z-index: 0;
  overflow: hidden;
}
div:before {
  content:&quot;&quot;;
  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;
  }
}

&lt;div&gt;&lt;/div&gt;

答案4

得分: 1

这是您提供的代码翻译：

&lt;!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false --&gt;

&lt;!-- 语言: lang-css --&gt;

@keyframes backgroundScroll {
  0% {
    背景位置: 100% 50%;
  }
  100% {
    背景位置: 0% 50%;
  }
}

@keyframes backgroundScrollHover {
  0% {
    背景位置: 100% 50%;
  }
  100% {
    背景位置: 0% 50%;
  }
}

div {
  宽度: 30vw;
  高度: 30vh;
  背景: 重复线性渐变(
    45度,
    #EE0000,
    #EE0000 10px,
    #999900 10px,
    #999000 20px
  );
  背景大小: 150%;
  背景位置: 50% 50%;
  动画: 背景滚动 3s 线性 无限;
}

div:hover {
  动画: 背景滚动悬停 20s 线性 无限;
}

&lt;!-- 语言: lang-html --&gt;

&lt;div&gt;&lt;/div&gt;

&lt;!-- 结束代码片段 --&gt;

希望这对您有所帮助。如果您有任何其他翻译需求，请随时告诉我。

英文:

Do mean Like this :

@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;
}

&lt;div&gt;&lt;/div&gt;

答案5

得分: 1

Sure, here's the translated content:

你想要像这样吗？

只需添加
animation: none;

或者

  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;

}

&lt;div&gt;&lt;/div&gt;

英文:

Do you want like this?

just add
animation: none;

  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;

}

&lt;div&gt;&lt;/div&gt;

答案6

得分: 0

这是您在寻找的内容吗？

: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;
}

<div></div>

英文:

Is this what you were looking for?

: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;
}

&lt;div&gt;&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何在CSS中悬停时减慢背景平移速度

问题

答案1

答案2

答案3

答案4

答案5

答案6

设置根元素的字体大小为em单位是什么意思？

Responsiveness not working at certain condition only.

绝对定位的 div 在滚动容器内，只相对于未滚动的位置定位。

如何在Karate UI中使用条件逻辑重复自定义函数

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论