英文:
css animation-timing-function steps with different step timings
问题
我有一个div，我正在将其宽度从0动画到100％，分为3步。我正在使用关键帧和animation-timing-function为steps(3)。
我需要动画是非线性和分阶段的，比如前两步较快，最后一步较慢。
.animated {
height: 10;
width: 0;
background-color: green;
animation: extend;
animation-duration: 1s;
animation-timing-function: steps(3);
animation-fill-mode: forwards;
}
@keyframes extend {
0% { width: 0% }
100% { width: 100% }
}
以上示例将在3个相等步骤中，使div的宽度从0％到100％进行动画。然而，如果我想要动画非线性呢？有没有一种简洁的方法来实现这一点，最好只用css？
我尝试过的：
- 我尝试使用一步，指定关键帧中的各段百分比，但百分比似乎不对；
- 我尝试使用两个独立的div，分别进行动画，但难以清晰实现；
- 我还尝试在关键帧中指定动画进度和宽度之间的非线性映射，但会产生意外效果，不正确的增量，整体上是错误的动画。
谢谢你的帮助。
英文:
I have a div where I'm animating the width from 0 to 100% in 3 steps. I'm using keyframes and an animation-timing-function of steps(3).
I require the animation to be non-linear and stepped, such as having the first two steps be faster, and the last step slower.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.animated {
height: 10;
width: 0;
background-color: green;
animation: extend;
animation-duration: 1s;
animation-timing-function: steps(3);
animation-fill-mode: forwards;
}
@keyframes extend {
0% { width: 0% }
100% { width: 100% }
}
<!-- language: lang-html -->
<div style="width: 100px">
<div class="animated">x</div>
</div>
<!-- end snippet -->
The above example will animate the width of the div between 0% and 100% in 3 equal steps. However, what if I want the animation to be non-linear? Is there a concise way to achieve this, preferably with css only?
What I have tried:
- I have tried using one step, specifying the section percentages in the keyframe, but the percentages seem to be off;
- I have tried using two separate divs with separate animations, but proved too difficult to implement cleanly;
- I have also tried specifying a non-linear mapping between animation progress and width in the keyframe, but produces unintended effects with incorrect increments, and overall an incorrect animation.
Thanks in advance.
答案1
得分: 1
steps() 函数专门设计用于以相同时间显示每个停止点。
为了实现您的任务，请尝试类似以下方式（用于演示，我增加了一点 animation-duration）：
<!-- 开始代码片段：js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-css -->
.animated {
background-color: green;
animation: extend 4s linear both;
}
@keyframes extend {
0%, 19.999% { width: 0% }
20%, 39.999% { width: 33.333% }
40%, 99.999% { width: 66.666% }
100% { width: 100% }
}
<!-- 语言: lang-html -->
<div style="width: 100px">
<div class="animated">x</div>
</div>
<!-- 结束代码片段 -->
英文:
The steps() function is specifically designed to display each stop for the same amount of time.
To implement your task, try something like this (for demonstration, I increase a bit animation-duration):
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.animated {
background-color: green;
animation: extend 4s linear both;
}
@keyframes extend {
0%, 19.999% { width: 0% }
20%, 39.999% { width: 33.333% }
40%, 99.999% { width: 66.666% }
100% { width: 100% }
}
<!-- language: lang-html -->
<div style="width: 100px">
<div class="animated">x</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论