动画div背景图片 [英] Animate a div background image

问题描述

我在div中有一张图片

I have an image in a div using

<div style="background-image: url(...);></div>

相当大.

我想在背景图像中进行一些移动.所以我想放大一点并进行一些平移，所以图像似乎在移动一点.

I want to make some movement in the background image. So I want to zoom in a little bit and do some translation, so it seems like the image is moving a little bit.

我希望它无限循环.

我尝试将 Animate.css 与< div class =动画脉冲无限"></div> ，但我不希望div移动，而只希望div内的背景照片移动.脉冲效应也太多了.我只希望它有一点动作.也许只是在x方向上向左平移然后向右平移

I have tried using Animate.css with <div class="animated pulse infinite"></div>, but I don't want the div to move, only the background photo inside the div. The pulse effect is also a bit too much. I just want it to have a little motion. Maybe just translate in the x direction to the left and then to the right

我尝试过

@keyframes animatedBackground {
  from {
    background-size: cover;
    background-position: 50% 22%;
  }
  to {
    background-size: cover;
    background-position: 100% 22%;
  }
}

但是如果我使用 background-size:Cover ?

我发现它确实有效，但是宽度是100％，所以如果我使用 background-position:50％22％; 或 background，它没有任何区别-position:100％22％; ，但是如果我更改y方向，它确实可以工作:-D

I found out that it does work, but the width is 100%, so it doesn't make any difference if I use background-position: 50% 22%; or background-position: 100% 22%;, but if I change the y-direction, it does work :-D

但是，如果我将动画时间设置为大于5秒的秒数，它将变得非常缓慢.有什么办法可以避免延迟?

But if I set the animation time to more seconds than 5s, it becomes very laggy. Are there any way to avoid the lag?

推荐答案

您可以仅使用CSS3 @keyframes 为背景位置设置动画，例如:

You can just use CSS3 @keyframes to animate the background-position, e.g.:

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
#animate-area {
  width: 200px;
  height: 200px;
  background-image: url(http://placekitten.com/400/200);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 10s linear infinite alternate;
}

<div id="animate-area"></div>

有关CSS的更多信息，请参见 MDN 动画.

See MDN for more information about the CSS animations.

这篇关于动画div背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！