Can ease-in and ease-out have different speeds for the css transition timing function?

Question

I'm trying to have one element exit slowly and another one come in just as slow, but I want the first element to come in fast and the second one to exit fast too. Is this possible? Here's what I tried. This is for a deck.js slide set.

.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;
}

You can't define multiples transitions for the same property (transform in this case). You need to define differents classes for each behavior, or also handle this with JavaScript/jQuery. — lmgonzalves, May 29 '15 at 18:10

score 1 · Answer 1 · answered May 29 '15 at 19:00

Deck.js has javascript functions that change the class on a section if it is previous, current, or next. Using Imgonzalves hint, I added the following classes and it seems to work.

> .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;
}

Can ease-in and ease-out have different speeds for the css transition timing function?

1 Answers1