[AI Help] Question: what is custom easing in css animations?

[dipikabh]

What is the issue with the answer?

I spotted two problems in the answer to this question.

1. One of the paragraphs in the answer says:

By default, CSS provides a set of predefined easing functions such as ease, ease-in, ease-out, ease-in-out, and linear. However, with custom easing, you can create your own easing function using the cubic-bezier() function.

Technically, ease, ease-in, ease-out, ease-in-out, and linear are all "keywords" and not "easing functions". In fact, linear keyword should not be mixed up with linear() easing function in the context of easing animations in CSS.

2. The list of linked articles does not link to the <easing function> page. I also do not understand the context of <number> and <alpha-value> links here.

MDN content that I've consulted that you might want to check:

[CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions)
[<number>](https://developer.mozilla.org/en-US/docs/Web/CSS/number)
[animation-timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function)
[<alpha-value>](https://developer.mozilla.org/en-US/docs/Web/CSS/alpha-value)

How would you categorize this issue?

• [ ] The answer is harmful / unsafe.
• [X] The answer is not correct.
• [ ] The answer is not helpful.
• [ ] The answer is outdated.

What did you ask?

what is custom easing in css animations?

What did AI Help answer?

Custom easing refers to the ability to define your own easing function for CSS animations. In CSS animations, easing functions determine the rate of change of an animated property over time. They control the acceleration and deceleration of the animation, giving it a specific feel or effect.

By default, CSS provides a set of predefined easing functions such as ease, ease-in, ease-out, ease-in-out, and linear. However, with custom easing, you can create your own easing function using the cubic-bezier() function.

The cubic-bezier() function allows you to define a custom cubic Bézier curve by specifying four values: P1x, P1y, P2x, and P2y. These values represent the control points of the curve and determine the rate of change at different points of the animation.

For example, you can define a custom easing function using the cubic-bezier() function like this:

.custom-easing {
  animation-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
}

In this example, the custom-easing class applies a custom easing function to an animation, which is defined by the cubic Bézier curve with control points (0.2, -2) and (0.8, 2).

By creating your own custom easing functions, you have more control over the animation's timing and can achieve unique and specific animation effects.

What MDN pages did AI Help consult?

• CSS transitions
• <number>
• animation-timing-function
• <alpha-value>

[caugner]

Thanks for flagging this issue. 👍

The root cause for the incorrect answer seems to be that the page was not consulted by AI Help.

We're looking into enhancements to avoid this issue.

[caugner]

@dipikabh Thanks again for reporting this issue. 👍

As we're working on an iteration, I would like to share with you what AI Help 2.0 might answer.

Can you please check how the following answer performs with regard to the issue you reported above? 🙏

what is custom easing in css animations?

Custom easing in CSS animations refers to the ability to define your own timing functions for how the intermediate values of CSS properties are calculated during an animation or transition. This allows you to control the acceleration and deceleration of the animated properties, creating more complex and visually appealing motion in your web pages.

In CSS, you can define custom easing with the cubic-bezier function, which allows you to create a Bézier curve with four control points that define the easing's shape. The cubic-bezier function is specified as cubic-bezier(p1x, p1y, p2x, p2y), where p1x, p1y, p2x, and p2y are the coordinates for the two control points P1 and P2 of the curve. The starting point P0 and the ending point P3 are implicitly defined as (0, 0) and (1, 1), respectively.

Here's an example of a custom cubic Bézier easing function:

/* Custom cubic-bezier easing */
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

This custom easing function would start the animation slowly, accelerate in the middle, and then slow down again towards the end.

You can also use the steps function to create a step-based easing, which can be useful for animations that should not be smooth but rather jump from one frame to the next in distinct steps. The steps function is defined as steps(number-of-steps, direction), where number-of-steps is an integer that represents the number of steps in the animation, and direction is one of start, end, jump-start, jump-end, jump-none, or jump-both, indicating when the step transition occurs.

Here's an example of a step-based easing function:

/* Step-based easing */
animation-timing-function: steps(4, end);

This step-based easing function would divide the animation into four equal parts, with the transition occurring at the end of each step.

For more information on custom easing functions, you can refer to the MDN documentation on easing functions and [cubic-bezier](https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function#cubic-bezier()).

Remember that custom easing functions can be used with both CSS transitions and animations to achieve the desired effect.

[dipikabh]

Can you please check how the following answer performs with regard to the issue you reported above? 🙏

This answer is far superior to the previous one! I like it.

Just one curiosity question: are we doing away with "What MDN pages did AI Help consult?" section in the answer and replacing it with "For more information..." type of text?

[caugner]

Just one curiosity question: are we doing away with "What MDN pages did AI Help consult?" section in the answer and replacing it with "For more information..." type of text?

We will still show them, but on top of the answer. The "For more information..." paragraph you see above is generated by the LLM.