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.
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.
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.
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.
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.
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.
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With