What is difference 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.

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

We got to talking about easing in a recent episode of ShopTalk with Val Head and Sarah Drasner. Easing is important stuff when it comes to animations and transitions. Combined with the duration, it has a huge effect on the feel of change. If you’re taking animation seriously as part of the brand on a project, you should define and consistently use easings.

That said, it’s a balance between:

• Crafting/using easings that match your brand
• Adhering to soft “rules” about what type of easings are appropriate when

Let’s look at one particular best practice, as I understand it. But first, another observation.

The default transition-timing-function in CSS (the easing) is ease.

.thing {

  /* The default, as in, you get this without defining anything */
  transition-timing-function: ease;

  /* Also the same as */
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  
}

It’s a pretty nice one! I’m guilty of hardly ever changing it. I set and tweak the durations and generally leave it to ease. Too nice, perhaps? I wonder if we would be more proactive about choosing well-fitting easings if CSS defaulted to the more boring/lifeless linear easing. Although linear can be quite useful, I’ve found, when the change is very small, like only moving a few pixels or a color changing shade.

The ease timing function is so nice, perhaps, because it’s a variant of ease-in-out. That is, the change happens slowly both at the beginning and end, and speeds up only in the middle somewhere. This gives soft edges (metaphorically) to the change and generally feels good.

There are two other built-in CSS timing functions:

• ease-in: slow at the beginning, fast/abrupt at the end
• ease-out: fast/abrupt at the beginning, slow at the end

While they make a certain intuitive sense looked at that way, the general “rule” (in quotes) is to use them opposite of how they are named:

• ease-in: when things are moving out.
• ease-out: when things are moving in.

Think of a knight’s squire. When the knight calls them, they better arrive at a run, and slow down into place. When the knight sends them away, they’d better very quickly get moving out of there.

That feels like a best practice. Like the animation is being courteous and obedient on both sides. Get here in a hurry, but compose yourself. Get out of here even faster and without delay.

Here’s the CSS that goes along with that kind of thinking. This changes the easing function depending on if the element in question is being shown or being hid, as well as the timing.

.container .alert {

  /* This timing applies on the way OUT */
  transition-timing-function: ease-in;

  /* Quick on the way out */
  transition: 0.2s;

  /* Hide thing by pushing it outside by default */
  transform: translateY(130%);

}

.container.alert-is-shown .alert {

  /* This timing applies on the way IN */
  transition-timing-function: ease-out;

  /* A litttttle slower on the way in */
  transition: 0.25s;
  
  /* Move into place */
  transform: translateY(0);

}

See the Pen Different eases for “in” and “out” by Chris Coyier (@chriscoyier) on CodePen.

I put this CSS-based demo together based on the smart things Val and Sarah were talking about as well as recently seeing Google’s design spec for this exact movement.

The animation timings we’re using here are also in “rule” territory, as Val generally described: 0.1-0.2s for simple interface movements, and up to 0.5s for more complex or larger movements.

In summary:

• ease is pretty nice, but you might want to customize some easings that feel right for your brand
• ease and ease-in-out have soft edges on both sides, but sometimes it’s more appropriate to use ease-in or ease-out
• You don’t have to use a single easing for both directions of an animation, you can switch it up
• You can change duration also

Also, here’s a handy-dandy reference to the defaults and their matching cubic-bezier in case you want to start with one of them and customize from there:

.examples {

  transition-timing-function: linear;
  transition-timing-function: cubic-bezier(0, 0, 1, 1);

  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

  transition-timing-function: ease-in-out;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

  transition-timing-function: ease-in;
  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);

  transition-timing-function: ease-out;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

}

What is the difference between ease in and ease out?

What does ease in and out mean?

What are easy in and ease out in animation?

What is easing in animation?