![]() Example of animation output of a box that moves from 0px (0% animation output) to 500px (100% animation output) with 1000ms duration. The following graph shows the connection between the animation keyframes and duration. ( Large preview)Īnimation duration determines the amount of time for the animation to go from the first keyframe to the last. Example of animation output (keyframes) of a box that moves from 0px (0% animation output) to 500px (100% animation output) from left to right. CSS Transitions use two keyframes (starting and ending value), while CSS animations allow more precise control with the rule. In order to get a better understanding of easing functions, we need to take a step back and take a look at the animation basics in CSS.Īnimation is defined by keyframes which determine how an element should look and be positioned at certain points. ![]() Even though there is nothing wrong with the animations, notice how they are not as stunning nor exciting as the original animations. Following video showcases In Pieces website with all easing functions set to ease-out. Animations wouldn’t look as good if only pre-defined easing functions were used instead of custom easing functions. If we go back to the In Pieces example and inspect the stylesheet, we can notice that various custom cubic-bezier easing functions are used in combination with the pre-defined linear and ease-in timing functions to achieve that beautiful animation flow. Humans respond better to natural motion, so making the animation and transition more varied and natural will result in a better user experience. However, having a dozen or more elements on a page with an animation that features the same duration and easing function values may make the UI a bit bland and monotone. When writing transition and animation properties in CSS, we usually go for the pre-defined easing functions like ease-out because it’s simple, they look alright and they work well for most cases. That is the power of easing functions, which are also called timing functions. It is precisely that flow in combination with the design and presentation which makes the animation look stunning and natural. Not only is the animation design and style beautiful, but they also flow nicely and harmoniously. Have you ever noticed how smooth and delightful animations look on a well-made, professional project? I am reminded of the In Pieces website where animations are used not just for decoration, but they also convey the message about the endangered species in an impactful way. In this article, we’re going to take a deep dive into easing functions and see how we can use them to create those natural and stunning animations. ![]() Using those custom-easing functions in the animations can lead to an improved impression on users and a more delightful user experience. As human beings, we are accustomed to a natural, non-linear motion. Easing functions can change the look and feel of an animation by affecting the rate, or speed, of an animation. ![]()
0 Comments
Leave a Reply. |