CSS动画速度控制
CSS动画速度控制
提问于 2016-12-11 15:30:59
<pre>
.parent
border: 1px solid tomato
height: 300px
margin: 0 auto
margin-top: 30px
width: 80%
.box
width: 50px
height: 50px
position: absolute
animation-name: falling
animation-iteration-count: infinite
.box-1
background-color: lightblue
right: 60vw
animation-duration: 6s
@keyframes falling
0%
top: -10vh
100%
top: 90vh
.box-2
background-color: lightgreen
right: 70vw
animation-duration: 8s
@keyframes falling
0%
top: -10vh
100%
top: 90vh
</pre>正如您在演示中所看到的，立方体的动画速度越接近底部，它的速度就越慢。
我想在秋天用同样的速度制作动画。
谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-12-11 15:36:53
CSS中的默认animation-timing-function是轻松 --开始时加速，中间慢一点。您需要一个线性定时函数，它具有恒定的速度。
将框定时函数更改为线性(钢笔)：
.box
width: 50px
height: 50px
position: absolute
animation-name: falling
animation-iteration-count: infinite
animation-timing-function: linearStack Overflow用户
发布于 2016-12-11 15:39:28
您可以使用动画功能linear。请看下面的片段：
.parent {
border: 1px solid tomato;
height: 300px;
margin: 0 auto;
margin-top: 30px;
width: 80%;
}
.box {
width: 50px;
height: 50px;
position: absolute;
animation-name: falling;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.box-1 {
background-color: lightblue;
right: 60vw;
animation-duration: 6s;
}
@keyframes falling {
0% {
top: -10vh;
}
100% {
top: 90vh;
}
}
.box-2 {
background-color: lightgreen;
right: 70vw;
animation-duration: 8s;
}
@keyframes falling {
0% {
top: -10vh;
}
100% {
top: 90vh;
}
}<div class="parent">
<div class="box box-1"></div>
<div class="box box-2"></div>
</div>
希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41087833
复制相关文章
相似问题
腾讯云开发者
