Question

我对这个动画很难过。我有一个元素，我正在创建一个移动路径（不包括样本中的供应商前缀）：

keyframes Path_1{
0%   {left:54%;top:66%;} 
50%  {left:54%;top:68%;} 
100% {left:54%;top:66%;}
}

这会创建一个简单的路径移动。路径提供给某些JS，如下所示：

"path" : "54,66||54,68"

JS遍历传入的所有坐标并自动生成路径移动关键帧。它还处理添加最后一个坐标对以循环动画。

我想知道是否有办法为每个点提供特定的速度/延迟？

keyframes Path_1{
    0%   {left:54%;top:66%;}  <- 1s
    50%  {left:54%;top:68%;}  <- 5s
    100% {left:54%;top:66%;}  <- 10s
}

谢谢！

Answer 1

您无法在关键帧声明中提供延迟作为额外参数。您基本上可以获得这样的百分比，在这些百分比中，您可以定义哪些属性从动画片段定义动画片段的动画片段定义的动画。

然而，有很多方法可以做到这一点。我创建了jsfiddle here

.thumbslist
  margin: auto
  //+clearfix
  text-align: center // add

  li
    position: relative
    display: inline-block // add
    height: 200px 
    overflow: hidden
    padding: 5px
    float: none // add

  .thumb
    height: 100%
    width: 100%
    background-size: contain
    background-position: center center
    background-repeat: no-repeat
    padding: 0

我们可以看到动画被编程为持续5秒，但是在某一点上，通过将动画属性保持为静态 n ％来实现延迟。在50％时，动画保持400px并保持这种状态直到90％并且效果暂停2s。 25％的5s = 2s。

通过调整百分比和总时间也可以实现速度。动画的第一部分比第二部分慢，因为覆盖相同距离所花费的时间仅为总时间的10％而不是50％。

像往常一样，CSS Tricks does a great run through提供了什么。

现在你只需要在json中定义这些数据并在你的javascript中解释它以构建正确的关键帧动画，玩得开心！

带延迟的CSS关键帧移动

1 个答案: