代码之家 › 专栏 › 技术社区 › Jacksonkr

一个常规动画一个循环动画没有JS

keyframe css-animations css

Jacksonkr · 技术社区 · 7 年前

如何播放0%-50%的关键帧,然后从50%-100%连续循环?我知道通过从DIV中添加/删除类可以做到这一点,但我希望在没有JavaScript的情况下做到这一点。

body {
  background: black;
}

@keyframes divReady {
  0% { width: 0vmin; }
  50% { width: 20vmin; transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#the-div {
  position: absolute;
  top: 40vmin;
  left: 40vmin;
  width: 0vmin;
  height: 20vmin;
  background: orange;
  animation: divReady 2s;
  animation-iteration-count: 2;
}

<div id="the-div">
</div>

2 回复 | 直到 7 年前

Temani Afif 7 年前

考虑两个动画。一带 forwards 以及无限的,其延迟等于第一个延迟的持续时间:

body {
  background: black;
}

@keyframes divReady-one {
  0% { width: 0vmin; }
  100% { width: 20vmin; }
}

@keyframes divReady-two {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#the-div {
  position: absolute;
  top: 40vmin;
  left: 40vmin;
  width: 0vmin;
  height: 20vmin;
  background: orange;
  animation: 
    divReady-one 1s forwards,
    divReady-two 2s 1s infinite;
}

<div id="the-div">
</div>

Ginger Wizard 7 年前

您不能在一个关键帧内执行此操作,您可以使用两个关键帧和两个DIV元素,请参见下文。

body {
  background: black;
}

@keyframes ani1 {
  0% { width: 0vmin; }
  100% { width: 20vmin; }
}

@keyframes ani2 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#div1 {
  top: 40vmin;
  left: 40vmin;
  width: 20vmin;
  height: 20vmin;
  position: absolute;
  animation: ani2 1s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

#div2 {
  width: 20vmin;
  height: 20vmin;
  background: orange;
  animation: ani1 1s;
}

<div id="div1">
<div id="div2">
</div>
</div>

推荐文章

Ariel · css中的图像滑块关键帧

8 年前

tony95 · CSS关键帧动画屏幕门效果[关闭]

9 年前

Richard · 仅CSS横幅滑块-图像超链接不工作

9 年前

Seth J. Freeman · 为什么我的动画关键帧在悬停时不触发?

9 年前

Laura Sage · 在div顶部停止关键帧动画?

10 年前

JLF · CSS关键帧动画完成后消失

11 年前

daviestar · css3关键帧动画的SASS(而非SCSS)语法

12 年前

apaul · IE10中的关键帧动画问题

13 年前

Damon · 通过animationName检测哪个AnimationEnd已启动

14 年前