如何在 CSS 中为背景图像设置动画？

Question

I have this animation:

@keyframes floating {
  from { transform: translate(0,  0px); }
  65%  { transform: translate(0, 15px); }
  to   { transform: translate(0, -0px); }    
}

and I want to insert this animation on background-image. How to do this? Thank you.

Answer 1

See if this approach would work for you:
https://codepen.io/panchroma/pen/RYbGwB

The idea is that you:

(1) style the element you are working with position:relative; overflow:hidden; position:relative; overflow:hidden; then
(2) apply the animation to an absolutely positioned pseudo element .element:before{...}

HTML

<div class="element"></div>  

CSS

.element{
  position: relative;
  overflow:hidden;
  width: 600px;
  height: 400px;
}

.element:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 400px;
  animation: floating 5s infinite;
  z-index: -1;
 background-image:url(https://github.com/bradleyflood/tool-sample-testing-images/raw/master/jpg-beach-1020x670-160kb.jpg)
}


@keyframes floating {
  from { transform: translate(0,  0px); }
  65%  { transform: translate(0, 15px); }
  to   { transform: translate(0, -0px); }    
}

I would like to take credit for this idea, it's from Craig Buckler though ;)

Hope this helps!