Css 到达底部时，从上到下的背景位置变慢

我试图在爱奥尼亚2的屏幕上创造一个“超时”的视觉效果。因此背景颜色从上到下滑动

因此，用户有一定的时间点击屏幕上的某个元素，从上到下的幻灯片显示了这一点

因此，在搜索了一个实例后，我们找到了一种方法：

ion-content.content {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, lightblue 50%, white 50%);
  transition: background-position 30s;
}

ion-content.content.timeout {
  background-position: 0 -100%;
}

在模板中：

<ion-content padding text-center [class.timeout]="isViewLoaded">

因此，我在加载视图后大约1秒向ion内容添加一个类，这会触发转换

这似乎很好，但问题是，幻灯片在开始时非常快，然后开始变慢，当它到达底部时，它真的非常慢

有人知道为什么会发生这种情况以及如何解决吗？ 谢谢

-计时自然是一种简单的功能，先加速后减速，你似乎想要线性计时

如果您在MDN上阅读了有关过渡时间的

信息，它将说明：

初始值：ease

ease
从一开始就加速，然后在接近终点时减速，就像一条钟形速度曲线。这就是为什么你的物品慢了下来，而且似乎要花很长时间才能最终到达目的地

请参见MDN中的图表：

在本页上：

解决方法是编辑CSS并使用
linear
方法，该方法不会加速或减慢，而是以恒定速度进行转换

ion-content.content {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, lightblue 50%, white 50%);
  transition: background-position 30s linear;
                                      ^^^^^^
}

澄清变化：

ion-content.content {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, lightblue 50%, white 50%);
  transition: background-position 30s;
  transition-timing-function: linear;
}

-计时自然是一种加速然后减速的
ease
功能，你似乎想要
linear
计时指令..问题不是我想要1s的延迟；如果我在加载视图时不这样添加类。超时已经添加，背景位置已经
0-100%
因此没有转换，背景已经是白色的。这已经足够公平了。我把你的代码误认为是jS，但我不知道这是ionic2，没问题，@Martin如果你愿意，我很乐意接受你的答案；我使用了
过渡时间函数：线性并且它工作得很好
ion-content.content {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, lightblue 50%, white 50%);
  transition: background-position 30s;
  transition-timing-function: linear;
}