首页 文章

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

提问于
浏览 次
1

我有以下关键帧动画：

@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％左边（'s why I set 20% two times), and from that point, the next animations (30% and 100%) should apply. But this doesn' t工作，我的div获得动画形式 width: 30% -> 0% 和 left: 100% -> 0%

是否可以使用纯CSS3动画在关键帧动画期间将divs属性“硬设置”为某个值，而无需对其进行动画处理？

css css3 animation

1 回答

  • 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位小数

    回复于

相关问题