css - css transition timing函数的ease-in和ease-out是否可以有不同的速度？

Question

我试图让一个元素缓慢退出，而另一个元素同样缓慢退出，但我希望第一个元素快速进入，第二个元素也快速退出。这可能吗？这是我试过的。这是用于 deck.js 幻灯片集。

.slide.long.in {
    -webkit-transition: -webkit-transform 5000ms ease-in;
    transition: transform 5000ms ease-in;
    transition: transform 500ms ease-out;
}
.slide.long.out {
    -webkit-transition: -webkit-transform 5000ms ease-out;
    transition: transform 500ms ease-in;
    transition: transform 5000ms ease-out;
}

Answer 1

Deck.js 具有 javascript 函数，可以更改某个部分的类(如果它是上一个、当前或下一个)。使用 Imgonzalves 提示，我添加了以下类，它似乎有效。

> .slide.long.in.deck-current {
    -webkit-transition: -webkit-transform 5000ms ease-in;
    transition: transform 2500ms ease-in;
}
> .slide.long.in.deck-next {
  -webkit-transition: -webkit-transform 500ms ease-out;
  transition: transform 500ms ease-out;
}
> .slide.long.in.deck-previous {
  -webkit-transition: -webkit-transform 500ms ease-out;
  transition: transform 500ms ease-out;
}
> .slide.long.out.deck-current {
    -webkit-transition: -webkit-transform 5000ms ease-out;
    transition: transform 500ms ease-out;
}
> .slide.long.out.deck-next {
    -webkit-transition: -webkit-transform 500ms ease-out;
    transition: transform 500ms ease-out;
}
> .slide.long.out.deck-previous {
    -webkit-transition: -webkit-transform 500ms ease-out;
    transition: transform 5000ms ease-out;
}