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()等非线性函数可能会产生很多复杂性。

<强> 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-以外的供应商前缀。

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

2 个答案: