Cubic Bezier curves are defined by four points: P0, P1, P2, and P3. In the context of CSS animations and transitions, these points are used to define the speed curve of the animation. The cubic-bezier function in CSS is specifically defined by the coordinates of two of these points: P1 and P2. P0 and P3 are implicitly defined (P0 is always (0,0) and P3 is always (1,1) for CSS transitions and animations), as they represent the start and end of the transition, respectively.
ease
ease-in
ease-out
ease-in-out
ease-linear
ease-elastic
ease-snail-pace
ease-bounce-out
ease-elastic-start
ease-sharp-snap
ease-slow-mo
ease-in-quad
ease-in-cubic
ease-in-quart
ease-in-quint
ease-in-sine
ease-in-expo
ease-in-circ
ease-in-back
ease-out-quad
ease-out-cubic
ease-out-quart
ease-out-quint
ease-out-sine
ease-out-expo
ease-out-circ
ease-out-back
ease-in-out-quad
ease-in-out-cubic
ease-in-out-quart
ease-in-out-quint
ease-in-out-sine
ease-in-out-expo
ease-in-out-circ
ease-in-out-back
Tailwind classNames:
Parent:
className = group cursor-pointer
Child:
className = transition-transform duration-[1500ms] transform group-hover:translate-x-[100%] ease
Parent Component
Child Component
ease
cubic-bezier(0.42, 0, 0.58, 1)