缓入和缓出对于css过渡计时功能可以有不同的速度吗？答案

【问题标题】：Can ease-in and ease-out have different speeds for the css transition timing function?缓入和缓出对于css过渡计时功能可以有不同的速度吗？
【发布时间】：2015-08-12 16:07:47
【问题描述】：

我试图让一个元素缓慢退出，另一个元素同样缓慢地进入，但我希望第一个元素快速进入，第二个元素也快速退出。这可能吗？这是我尝试过的。这是一个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;
}

【问题讨论】：

您不能为同一属性定义多个转换（在这种情况下为转换）。您需要为每种行为定义不同的类，或者也使用 JavaScript/jQuery 来处理。

标签： css webkit deck.js

【解决方案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;
}

【讨论】：