Elastic easing in CSS3, best approach

Question

I'd like to emulate an elastic easing function in CSS3. CSS3 does not support this natively, so I've been coming up with my own keyframes, and it looks okay, but not perfectly natural.

I do NOT want a solution that requires any additional JavaScript scripts. All of the other posts on StackOverflow have JS solutions accepted.

What's the best way to implement elastic easing in pure CSS3?

Here's my work so far, if that helps anybody...

https://jsfiddle.net/407rhhnL/1/

I'm animating the red, green, and blue isometric rectangular prisms. I've simulated an elastic easing manually by hardcoding the following CSS3 keyframes:

@include keyframes(popup) {
  0% {

  }

  20% {
    transform: translateY(-50px);
  }

  40% {
    transform: translateY(20px);
  }

  60% {
    transform: translateY(-6px);
  }

  90% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(0px);
  }
}

I'm not looking for suggestions on tweaking this code, I'd like to know if there's a better solution than hard coding.

Blatherskite

Including your attempts would be useful. – Foretaste

So if you don't want to code in any other keyframes how do you propose to do this with CSS3? A minimal and complete example rather than an external source would still be better. – Adversative

There's nothing wrong in the way you did it. – Westberry

Answer 1

Depending on your browser limitations (and if you're using CSS3 you should be ok regardless), you can actually apply easing transitions with the cubic-bezier() keyword instead.

An example animation would look like this:

transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transition-duration: 2.9s;

Lea Verou's blog post covers this pretty well.

If you are creating a keyframe animation you must use animation-timing-function instead.

Surname

I have used cubic-bezier for custom easing, and what is commonly referred to as back easing, but have not been able to emulate the elastic easing like in the link provided. I've updated my question with a link to my current iteration – Blatherskite

Your ideal solution is a mix of both: some keyframes, and cubic-bezier timing functions in each of them. Remember that when doing a keyframe animatiion the timing functions are applied to the change between one keyframe and the next – Collator

@Collator I didn't know that about the timing functions. Thanks for the info. I think Phil's might be the best answer then – Blatherskite

cubic-bezier(0, 1.4, 1, 1); is quite nice too. see also cubic-bezier.com and roblaplaca.com/examples/bezierBuilder – Scandian

Answer 2

Lots of great cubic-bezier transitions available here:

http://easings.net/

Something like this might be what you want:

transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); 

Stoat

Answer 3

The only way to do an elastic easing in pure CSS is by hard-coding a keyframes animation, like you did.

The main problem with this approach is that the animation may look rough. To make it smoother, you just have to add more key frames. But then, the payload increases a little bit.

If you compare this approach with using a JavaScript library, a library lets make smoother and preciser animations, but the payload is way heavier because you have to use an entire library.

So, for some short transitions, it's fine to use hard-coded key frames animations.

It can be tricky to make the key frames, so I suggest using a tool for that. This is the only I know of: https://easyeasings.mauri.app/

Edit: There's a CSS proposal to create this kind of easings: https://github.com/w3c/csswg-drafts/pull/6533

Paginal

Answer 4

As other answers have mentioned, using keyframes, is usually somewhat, janky.

Other bezier solutions have been posted, but I find them unconvincing visually.

There's a limit with what can be acheived, however, I find this curve to be a pretty convincing elastic ease out.

    transition: transform 500ms
                cubic-bezier(0.5, 1.8, 0.3, 0.8);

Note the pronounced P2(1.8) gives the initial movement an exaggerated over bounce, typical of simulated elasticity. You can experiment with the value of P2 to tweak the effect.

I use the effect here on the coverage report graph "zoom in / out"

Forman