Difference Between CSS3 Transitions' Ease-In and Ease-Out

Difference between CSS3 transitions' ease-in and ease-out

CSS3's transitions and animations support easing, formally called a "timing function". The common ones are ease-in, ease-out, ease-in-out, ease, and linear, or you can specify your own using cubic-bezier().

ease-in will start the animation slowly, and finish at full speed.
ease-out will start the animation at full speed, then finish slowly.
ease-in-out will start slowly, be fastest at the middle of the animation, then finish slowly.
ease is like ease-in-out, except it starts slightly faster than it ends.
linear uses no easing.
Finally, here's a great description of the cubic-bezier syntax, but it's usually not necessary unless you want some very precise effects.

Basically, easing out is to slow to a halt, easing in is to slowly accelerate, and linear is to do neither. You can find more detailed resources at the documentation for timing-function on MDN.

And if you do want the aforementioned precise effects, the amazing Lea Verou’s cubic-bezier.com is there for you! It’s also useful for comparing the different timing functions graphically.

Another, the steps() timing function, acts like linear, but only performs a finite number of steps between the transition’s beginning and its end. steps() has been most useful to me in CSS3 animations, rather than in transitions; a good example is in loading indicators with dots. Traditionally, one uses a series of static images (say eight dots, two changing colour each frame) to produce the illusion of motion. With a steps(8) animation and a rotate transform, you’re using motion to produce the illusion of separate frames! How fun.

CSS transition ease in and ease out different value

You can use different transition-duration values for the styles affecting your element, for example:

div {
  width: 150px;
  height: 150px;
  background-color: gray;
  transition: width 180ms ease-in;
}

div:hover {
  width: 300px;
  transition-duration: 240ms;
  transition-timing-function: ease-out;
}

<div>My Element</div>

css transition delay ease-out but not ease in

So I finally found an example that seems to work, I made a small prototype here: https://codepen.io/andrelange91/pen/zYRyRyw

Where I split up the two pieces, thereby having a hover on and hover off.

.box {
  height:100px;
  // hover off
  transition: height 0.4s ease-out 1s;
  &:hover{
    // hover on
    transition: height 0.4s ease-in;
    height:150px;
  }
}

css3 transition ease out

Try this css

blog-post
    {
        float: left;
        width: 100%;
        position: relative;
        display: block;
        -webkit-perspective: 1700px;
        -moz-perspective: 1700px;
        perspective: 1700px;
        -webkit-perspective-origin: 0 50%;
        -moz-perspective-origin: 0 50%;
        perspective-origin: 0 50%;

    }

    .mask
    {

        top: 0;
        left:0;
        padding: 0;
        position: absolute;
        display: inline-block;
        overflow: hidden;
        height: 100%;
        background-color:#ff1493;
        z-index: 10;
        text-align: center;
        width: 50%;
        opacity: 0;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: rotateY(-90deg);
        -moz-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
        -webkit-transition: -webkit-transform 0.4s, opacity 0.2s 0.4s;
        -moz-transition: -moz-transform 0.4s, opacity 0.2s 0.4s;
        transition: transform 0.4s, opacity 0.2s 0.4s;



    }
    .mask h4
    {
        text-align: center;
    }
      .blog-post:hover .mask
            {

          opacity: 1;
          -webkit-transform: rotateY(0deg);
          -moz-transform: rotateY(0deg);
          transform: rotateY(0deg);
          -webkit-transition: -webkit-transform 1s, opacity 0.2s;
          -moz-transition: -moz-transform 1s, opacity 1.2s;
          transition: transform 1s, opacity 0.2s;
          text-align: center;
      }

CSS Transition - eases in but doesn't ease out?

Add the transition properties to the element itself rather than the :hover pseudo-class version.

In doing so, the transition will take place when hovering on and off.

Updated Example

.img-blur {  transition: all 0.35s ease-in-out;}.img-blur:hover {  -moz-filter: blur(4px);  -webkit-filter: blur(4px);  filter: blur(4px);}

<img src="http://i.imgur.com/Vp5StNs.png" class="img-blur" />

CSS3 Transition: Different transition for IN and OUT (or returning from transitioned state)

Here is a simplified test case:

div {
    background: blue;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

div.loading {
    opacity: 1;
    background: red;
    transition: opacity 2s ease-in-out, background 1s ease-in;
}

Notice how the opacity fades the same in and out, but the background only fades in, and immediately turns blue on fade out.

I used :hover as an example, but it should work the same when adding and removing classes with JavaScript.

Demo

If you'd like a more specific example please provide a reduced test case on dabblet or Jsfiddle.

Difference Between CSS3 Transitions' Ease-In and Ease-Out