并行多个CSS动画效果

为了吓唬皮克斯的家伙（用我的动画技巧），我正试图用CSS获得行走效果

不幸的是，我无法同时使用两种不同的动画效果，我希望

步骤

以可变速率旋转到

walkRight

过渡

以下是我目前的尝试：

CSS

---

下面是一个示例

您可以在

步骤

动画中使用

动画迭代计数

，并设置较短的

持续时间

。您只需匹配将重复自身次数

n

的

walk

和

steps

的结束时间，因此在本例中，如果持续时间为1s，则大约为9

.wrapper{
位置：绝对位置；
宽度：100px；
高度：100px；
右：0；
动画名称：walkRight；
动画迭代次数：1；
动画计时功能：放松；
动画持续时间：10秒；
}
绿巨人先生{
-webkit动画：步骤1s线性0s；
动画迭代次数：9次；
}
@关键帧向右行走{
0% {
转换：translateX（-400px）；
}
100% {
变换：translateX（0）；
}
}
@-webkit关键帧步骤{
0% {
-webkit变换：旋转（0度）；
}
25% {
-webkit变换：旋转（20度）；
}
50% {
-webkit变换：旋转（0度）；
}
75% {
-webkit变换：旋转（-20度）；
}
100% {
-webkit变换：旋转（0度）；
}
}

您可以尝试：

• 使用

  hulk

  类上的

  动画迭代计数：10

  ，并将持续时间设置为

  1s

  （因为walkRight的持续时间为10s），这意味着在行走期间将应用

  行走

  效果10次
• 使用

  -webkit-

  为确保浏览器能够正确渲染动画，您可以使用（或类似）自动执行此操作

.wrapper{
位置：绝对位置；
宽度：100px；
高度：100px；
右：0；
-webkit动画名称：walkRight；
动画名称：walkRight；
-webkit动画计时功能：轻松输出；
动画计时功能：放松；
-webkit动画持续时间：10秒；
动画持续时间：10秒；
}
绿巨人先生{
-webkit动画：步骤1s线性0s；
-webkit动画迭代次数：10次；
动画迭代次数：10次；
}
@-webkit关键帧walkRight{
0% {
-webkit转换：translateX（-400px）；
转换：translateX（-400px）；
}
100% {
-webkit转换：translateX（0）；
变换：translateX（0）；
}
}
@关键帧向右行走{
0% {
-webkit转换：translateX（-400px）；
转换：translateX（-400px）；
}
100% {
-webkit转换：translateX（0）；
变换：translateX（0）；
}
}
@-webkit关键帧步骤{
0% {
-webkit变换：旋转（0度）；
}
25% {
-webkit变换：旋转（20度）；
}
50% {
-webkit变换：旋转（0度）；
}
75% {
-webkit变换：旋转（-20度）；
}
100% {
-webkit变换：旋转（0度）；
}
}

我有点迷路了。这个角色正对着我们，因此不确定这些步骤如何产生行走效果。这两个动画在Chrome和Firefox中同时运行。您使用的浏览器是否无法识别webkit？为什么您将一个转换指定为webkit，而将另一个指定为常规转换？@EdwardD我希望

步骤

移动得更快，与transitionX无关

.wrapper {
    position: absolute;
    width: 100px;
    height: 100px; 
    right: 0;
    animation-name: walkRight;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 10s;
} 

.hulk {
  -webkit-animation: steps 10s linear 0s;
}

@keyframes walkRight {
  0% {
    transform: translateX(-400px);
  }
  100% {
    transform: translateX(0);
  }
}

@-webkit-keyframes steps {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(20deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(-20deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}