Question

我需要有关webkit扩展功能的帮助。

我有一个.css文件，其属性如下所示：

@-webkit-keyframes expand 
{
  from {-webkit-transform:scale(1)}
  to {-webkit-transform:scale(1.2)}
}

.image-highlight
{
   -webkit-animation-name: expand;
   -webkit-animation-duration:0.2s;
   -webkit-animation-iteration-count:1;
   -webkit-animation-timing-function:ease;
}

我有一个带元素的HTML：

  <div id="slider">
    <img src="images/blueMarble_0.PNG" />
    <img src="images/blueMarble_1.PNG" />
    <img src="images/blueMarble_2.PNG" />
    <img src="images/blueMarble_3.PNG" />
    <img src="images/blueMarble_4.PNG" />
  </div>

我有一个带有函数的js文件，它将动画（缩放）数组的中间图像。我正在使用这个jQuery语句来做动画：

 `$(pic[2]).addClass('image-highlight');`

这个jquery实际上缩放了图像（pic [2]）。但缩放发生0.2秒，并缩小到原始大小。即使在完成0.2秒后，我怎样才能保持缩放？我不想将其调整为原始大小。可以在不改变动画持续时间的情况下完成吗？请你能帮帮我吗？

Answer 1

我相信你想加入你的班级：-webkit-animation-fill-mode: both

这将导致动画的初始关键帧在应用的情况下立即显示和动画结束后将继续显示最终的关键帧。

您可以使用的其他值：

无 - 动画的效果仅在定义的动画持续时间内明显。（默认）

向后 - 动画样式应用于元素后立即应用动画的初始关键帧。这仅影响-webkit-animation-delay的非零值的动画。

前进 - 动画的最后一次迭代完成后，动画的最终关键帧将继续应用。

image-highlight可能也会满足您的需求。

WebKit规模转换问题

1 个答案: