没有动画背景图像的CSS关键帧动画

Question

我正在尝试在包含背景图像的元素的 Y 轴上执行旋转。当我达到该动画的 50% 时，我想更改图像。

问题:

背景图片也是动画的

我想在不使用 Javascript 的情况下做到这一点。

这可能吗？

代码:

.picture {
  background-image: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png');
  display: inline-block;
  vertical-align: top;
  border: 5px solid red;
  width: 250px;
  height: 250px;
  background-size: 100% 100%;
  border-radius: 100%;
}

.animated {
  -webkit-animation-name: turns;
          animation-name: turns;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes turns {
  0%   { background-image: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png'); -webkit-transform: rotateY(0deg); }
  1%   { background-image: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png'); }
  50%  { background-image: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png'); }
  51%  { background-image: url('http://i3.mirror.co.uk/incoming/article172940.ece/alternates/s615/image-16-jim-carrey-50th-birthday-604638636.jpg'); }
  100% { background-image: url('http://i3.mirror.co.uk/incoming/article172940.ece/alternates/s615/image-16-jim-carrey-50th-birthday-604638636.jpg'); -webkit-transform: rotateY(180deg); }
}

jsFiddle:http://jsfiddle.net/dmzj7cfh/1/

Answer 1

如果您遇到的问题是背景图像在旋转的 50% 内没有发生变化，那是因为在背景的情况下，计时功能应用于各个步骤(因为它设置在每个关键帧)，但对于旋转情况下的完整动画。

最简单的解决办法就是设置

-webkit-animation-timing-function: linear;

这样上面的问题就无所谓了

我还解决了背景大小的问题。

fiddle