Question

@keyframes myAnim {
    0% {
        bottom: 47.5%;
        left: 29%;
    }
    70% {
        bottom: 70%;
        left: 64%;
    }
    100% {
        bottom: 0%;
        left: 64%;
    }
}

值为bottom和left的百分比动画可能与我们想要的位置不同。因此，使用firebug，在运行动画时无法检查。所以，我尝试使用暂停方法检查，但似乎错了：

@keyframes myAnim {
    0% {
        bottom: 47.5%;
        left: 29%;
    }
    70% {
        bottom: 70%;
        left: 64%;
        animation-play-state: paused;
    }
    /* so that I can inspect and set the percentage*/
    100% {
        bottom: 0%;
        left: 64%;
    }
}

是否有任何技术可以检查正在运行的动画的值？

Answer 1

将动画设置为

@keyframes myAnim{
    0%{bottom: 47.5%; left: 29%;}
    100%{bottom: 70%; left: 64%;}
  /*
    100%{bottom: 0%; left: 64%;}
  */
}

并在元素集转发中为animation-fill-mode属性。

这样动画将以70％关键帧中的状态结束

获取@keyframe动画元素的位置

1 个答案: