WebKit 规模转换问题

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

这将导致动画的初始关键帧在您的 image-highlight 时立即显示应用类并且最终关键帧将在动画完成后继续显示。

您可以使用的其他值：

• none - 动画效果仅在定义的动画持续时间内才明显。 （默认）
• 向后 – 一旦将动画样式应用于元素，就会应用动画的初始关键帧。这仅影响 -webkit-animation-delay 具有非零值的动画。
• 向前 – 动画的最终关键帧在动画的最终迭代完成后继续应用。

-webkit-animation-fill-mode:forwards 可能也能满足您的需求。