What is the difference between Ease In and Ease Out?
A dictionary will define animation as the illusion of motion. Like cartoons, animations are multiple drawings filmed in succession to create the illusion of movement. Animations are used to make websites more engaging and can be used to draw the user’s attention, oftentimes showing that a button is clickable. Show
Animations can be subtle or elaborate — you decide. In this post, we’ll look at timing functions. Timing functions help control how animations behave over a specified
duration. Before we go further, let’s look at the CSS properties responsible for creating animations in the first place. The You might be wondering, what’s the difference? I’ll tell you. Simpler web animations can be created using
Contents
What are timing functions?Timing functions define how web elements behave at each frame of an animation. The So, you could have your animation: Or like this: animation-name: name; animation-duration: 500ms; animation-timing-function: ease; The same with transition: Or: transition-property: transform; transition-duration: 500ms; transition-timing-function: ease; transition-timing-functionThe There are six
These are also called easing functions. linear timing function
ease timing functionAnimations with the The speed of the animation at the end is slower than at the start. Let’s demonstrate these two timing functions. We’re going to have a race across the stars! Let’s use a simple HTML markup: Then some basic CSS: body { margin: 0px; padding: 0px; } *{ box-sizing: border-box; } .container{ width: 100%; height: 300px; background: rgba(224,214,233, 0.5) } .rockets{ width: 500px; height: 100px; transition-duration: 2s; transition-property: transform; display: flex; align-items: center; } .rockets img{ height: 100px; border-right: 1px solid red;/*To track the speed easily*/ } Now, we’ll add the animation property; the trigger is going to be .container:hover .rockets{ transform: translateX(500px); } .rocket-1{ transition-timing-function: linear; } .rocket-2{ transition-timing-function: ease; } The resulting animations: See the Pen
At first glance, it looks like ease-in, ease-out, and ease-in-out timing functionsAnimations with the
Ready for the second race? .rocket-1{ transition-timing-function: ease-in; } .rocket-2{ transition-timing-function: ease-out; } .rocket-3{ transition-timing-function: ease-in-out } Ready, set, See the Pen cubic-bezier()timing functionThe cubic Bezier curve is defined by control points that draw a smooth curve. All easing functions have Bezier curves. The cubic-bezier(P1,P2,P3,P4)
Let’s demonstrate. We’ll go with random values for the control points.
More great articles from LogRocket:
.rocket-1{ transition-timing-function: cubic-bezier(.66,.39,.21,.67); } .rocket-2{ transition-timing-function: cubic-bezier(1,-0.42,.42,-0.39); } .rocket-3{ transition-timing-function: cubic-bezier(.57,1.34,.21,0); } Hover on the rockets to see the result: See the Pen
You can choose to manually enter the values for the control points, but it might take time to find the right easing for your animation. There are two ways you can choose the perfect Using the inspector toolFirst, the animated element should be given any timing function. Access the dev tools by right clicking on the web element and selecting Inspect or Inspect element, depending on the browser. You’ll find a curve icon beside the name of the timing function that opens up a cubic Bezier editor. You can compare the default easing functions. Or cycle through their variations. Click on and adjust the handles to get the When you find a suitable speed curve, copy the Using a cubic Bezier generatorHead over to cubic-bezier.com and you’ll find a great tool that helps you create Bezier speed curves. Play with the handles until you get a curve you like. Preview and compare with the default easing functions. Copy and paste into your project and you’re all set! animation-timing-functionThe When an
easing function is used with the We’re going to create some scroll animations. The elements will come into view as you scroll down the page. See
the Pen Here, you can see all the easing functions in action as you scroll down. The HTML is straightforward. We start with a simple setup:
After some basic styling, each element is given its own .active.box-1 { animation: box-1 1s ease; } .active.box-2 { animation: box-2 1s linear; } .active.box-3 { animation: box-3 1s ease-in; } .active.box-4 { animation: box-4 1s ease-out; } .active.box-5 { animation: box-5 1s ease-in-out; } .active.box-6 { animation: box-6 1s cubic-bezier(.66,.39,.21,.67); } .active.box-7 { animation: box-7 1s cubic-bezier(1,-0.42,.42,-0.39); } .active.box-8 { animation: box-8 1s cubic-bezier(.57,1.34,.21,0); } All elements that will be animated have the .reveal { position: relative; opacity: 0; } .reveal.active { opacity: 1; } The scroll animation is controlled with this JavaScript function: function reveal() { var reveals = document.querySelectorAll(".reveal"); for (var i = 0; i < reveals.length; i++) { var windowHeight = window.innerHeight; var elementTop = reveals[i].getBoundingClientRect().top; var elementVisible = 150; if (elementTop < windowHeight - elementVisible) { reveals[i].classList.add("active"); } else { reveals[i].classList.remove("active"); } } } window.addEventListener("scroll", reveal); The condition for triggering the animation is when the elements come into view as you scroll down. This function tracks the distance the element has scrolled on the page,
Next up, the @keyframes box-1 { 0% { transform: translateY(100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes box-2 { 0% { transform: translateY(100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes box-3 { 0% { transform: translateY(100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes box-4 { 0% { transform: translateY(100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes box-5 { 0% { transform: translateY(100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes box-6 { 0% { transform: translateY(100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes box-7 { 0% { transform: translateY(100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes box-8 { 0% { transform: translateY(100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } step-end, step-start, and steps() timing functionsThese timing functions break animations into equal sections or steps. The Let’s demonstrate how it works: .rockets{ width: 500px; height: 100px; animation-duration: 2s; animation-name: flight; animation-iteration-count: infinite; animation-direction: alternate-reverse; display: flex; align-items: center; } .rocket-1{ animation-timing-function: step-end; } .rocket-2{ animation-timing-function: step-start; } @keyframes flight{ 0%{transform: none;} 25%{transform: translateX(125px);} 50%{transform: translateX(250px);} 75%{transform: translateX(375px);} 100%{transform: translateX(500px);} } The result: See the Pen The If you want to be a bit more intricate, you can use .rocket-1{ animation-timing-function: steps(5); } .rocket-2{ animation-timing-function: steps(10); } .rocket-3{ animation-timing-function: steps(20); } @keyframes flight{ 0%{transform: none;} 100%{transform: translateX(500px);} } See the result here: See the Pen There are keywords you can use with the
.rocket-1{ animation-timing-function: steps(5,jump-end); } .rocket-2{ animation-timing-function: steps(5,jump-start); } .rocket-3{ animation-timing-function: steps(5,jump-both); } .rocket-4{ animation-timing-function: steps(5,jump-none); } @keyframes flight{ 0%{transform: none;} 100%{transform: translateX(500px);} } The result is here: See the Pen Global timing functionsThese global properties work for every CSS property. They include:
The above elements are CSS inheritance properties. Unfortunately, So, if the property is inherited, Browser supportThe following properties and functions are supported on all modern browsers:
Safari 4–5 doesn’t support any of the Bonus property (animation-delay and transition-delay)Since we’re dealing with timing, there’s a property that can be used alongside the timing
functions:
animation: No matter the order of the properties, the second time value in the declaration will always be the delay property. So, if we had a declaration like this: transition: transform 2s 1s ease; The Let’s demonstrate with the rockets: .rocket-1{ transition-timing-function: cubic-bezier(.66,.39,.21,.67); transition-delay: 500ms; } .rocket-2{ transition-timing-function: cubic-bezier(.66,.39,.21,.67); transition-delay: 700ms; } .rocket-3{ transition-timing-function: cubic-bezier(.66,.39,.21,.67); transition-delay: 1s; } See the Pen This could be used to load different sections of a webpage without having to define a different ConclusionAnimations are a great way to interact with visitors and deliver engaging content. It is important that they are kept to a minimum, however, as animating too many properties on the same webpage or at the same time can have a detrimental effect on performance. Also, I recommend keeping the duration short. One second is longer than you think, and animations should ideally be in milliseconds. We’ve looked at how timing functions control the speed and behavior of web animations. From easing to step functions, can you see them in practical scenarios? Buttons, progress bars, text cards, and so much more can be animated. Try them out and create something great! Is your frontend hogging your users' CPU?As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket. https://logrocket.com/signup/LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors. Modernize how you debug web and mobile apps — Start monitoring for free. What is difference Ease In and Ease Out?In classic animation, the term for motion that starts slowly and accelerates is "slow in," and for motion that starts quickly and decelerates is "slow out." The terminology most commonly used on the web for these are “ease in” and “ease out,” respectively.
What is the difference between ease in and ease out in After Effects?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.
What is the difference between ease and easeease-in - specifies a transition effect with a slow start. ease-out - specifies a transition effect with a slow end. ease-in-out - specifies a transition effect with a slow start and end. cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function.
What does ease in and ease out mean in animation?Ease in is starting the animation slowly and then speeding up the movement as it comes to a halt. Ease out is starting off quickly and slowing down at the end.
|