没有动画背景图像的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

Answer 2

• 您可能应该使用多个动画关键字来简化，因为您需要更改两个不同的属性。

• 对于background-image 动画，使用animation-timing-function: steps(2);，对于transform: rotate;，使用linear 函数来简化关键帧。

• 使用ease 和自定义cubic-bezier()s 等非线性函数会产生很多复杂性。

FIDDLE

片段：

div{
  display: inline-block;
  border: 5px solid red;
  width: 250px;
  height: 250px;
  background-size: cover;
  border-radius: 100%;
  -webkit-animation-name: animate, background;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear, steps(2);
  animation-name: animate, background;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: linear, steps(2);
  background-image: url('http://i.imgur.com/gmucjHi.png');
  position: relative;
}
  

@-webkit-keyframes animate {
    0% {transform: rotateY(90deg);}
    100% {transform: rotateY(450deg);}
}
@-webkit-keyframes background {
    0% {background-image: url('http://i.imgur.com/gmucjHi.png');}
    100% {background-image: url('http://i.imgur.com/mZinlRQ.jpg');}
}

@keyframes animate {
    0% {transform: rotateY(90deg);}
    100% {transform: rotateY(450deg);}
}
@keyframes background {
    0% {background-image: url('http://i.imgur.com/gmucjHi.png');}
    100% {background-image: url('http://i.imgur.com/mZinlRQ.jpg');}
}

<div></div>

---

注意：除了-webkit-，我没有添加供应商前缀。