Question

我对CSS中的动画非常陌生，确实很新。我想要完成的事情在概念上相对简单。我想为我的目标元素设置动画，在这种情况下我的背景图像会回到它的原始位置。

例如，

@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}

将背景图像移动到它的宽度，但我想知道是否可以将其动画回0.否则，在达到它的宽度后，动画将会切割并且背景将立即转换回0，使其看起来非常不稳定。

Answer 1

我想是这样的事情：

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

Answer 2

您可能知道，但定义动画与创建函数非常相似。你仍然需要在某个地方调用它。

<强> HTML

<html>
    <head>
      <title>Hello, Lamb!</title>
    <body>
         <h1>Hello, Lamb!</h1<
    </body>
</html>

<强> CSS

body {
  background-image: url('http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg');
  background-repeat: none;
  animation: animatedBackground 5s infinite;
}
@keyframes animatedBackground {
    0%{
        background-position: 0 0;
    }
    50% {
        background-position: 100% 0;
    } 
    100% {
        background-position: 0 0;
    }
}

http://codepen.io/BigDaddyTeemoe/pen/qdQdMw

关键帧动画原始位置

2 个答案: