Question

我有以下关键帧动画：

@include keyframes(anim1) {
    0% { width: 10%; left: 50%; }
  10% { width: 30%; left: 100%; }
  20% { width: 30%; left: 100%; }
  20% { width: 0%; left: 0%; }
  30% { width: 80%; left: 100%; }
  100% { width: 100%; left: 100%; }
}

在动画的20％时，动画div应该直接跳到0％宽度和0％左右（这就是为什么我设置20％两次），从那时起，下一个动画（30％）和100％）应该适用。但这不起作用，我的div获得动画形式width: 30% -> 0%和left: 100% -> 0%

是否可以使用纯CSS3动画来实现＆＃34;硬设置＆＃34;在没有设置动画的情况下，在关键帧动画期间将div属性设置为某个值？

Answer 1

尝试将前20％设置为19.99％，这样你就可以得到这样的动画：

@include keyframes(anim1) {
    0% { width: 10%; left: 50%; }
    10% { width: 30%; left: 100%; }
    19.99% { width: 30%; left: 100%; }
    20% { width: 0%; left: 0%; }
    30% { width: 80%; left: 100%; }
    100% { width: 100%; left: 100%; }
}

在post @markbly中，解释了百分比可能小于2位小数

CSS3关键帧动画：设置不带动画的属性

1 个答案: