Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Elastic easing in CSS3, best approach

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.

like image 564
Jimmie Tyrrell Avatar asked May 04 '14 22:05

Jimmie Tyrrell


People also ask

What is easing in CSS?

ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default) linear - specifies a transition effect with the same speed from start to end.

What is cubic Bezier used for in CSS?

The cubic-bezier() function is an inbuilt function in CSS which is used to defines a Cubic Bezier curve. A Bezier curve is a mathematically defined curve used in two-dimensional graphic applications like adobe illustrator, inkscape etc.

What is the difference between Ease In and Ease Out?

Ease-In: Causes the animation to start more quickly than linear ones, and it also has deceleration at the end. Ease Out: This is the opposite of Ease-In. Animation starts slow and ends fast. Ease In Out: Slow start, fast middle, and slow end.

What is an easing function?

An easing function just defines a transition between a start and end values. Those could be x coordinates, or a color, or the transparency of an object. And in fact, in theory, you could apply different easing function to interpolate for different properties. Hopefully this helps shed some light on the basic idea.


2 Answers

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.

like image 165
Phil.Wheeler Avatar answered Oct 21 '22 17:10

Phil.Wheeler


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); 
like image 42
Rowan Avatar answered Oct 21 '22 17:10

Rowan