how transition works with opacity using css?

user_3701974 0
Viewed 143

I am using below plugin in my demo application https://splidejs.com/options/

i am confused on this line style="width: 538px; transition: opacity 10000ms cubic-bezier(0.42, 0.65, 0.27, 0.99) 0s;. how transition works ?

what I know : if element change it's opacity it will take 10 sec but my application it is taking 5 sec

I checked my demo application with stop watch. When I click on next button it took 5sec to show new element.

here is my demo application code

https://codesandbox.io/s/compassionate-drake-y4em6?file=/src/index.js:105-110

new Splide("#splide", {
  type: "fade",
  speed: 10000
}).mount();

I mentioned speed 10sec . It mean it takes 10 sec to show new element as per document mentioned.why it is taking 5 sec ?

document link

https://splidejs.com/options/ any suggestion ?

css html jquery javascript
1 Answers

cubic-bezier function is a way to define a Cubic Bezier curve.

A Cubic Bezier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve and, in CSS these points are fixed as the coordinates are ratios. P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.

The problem is cubic-bezier(0.42, 0.65, 0.27, 0.99) is too curved to the up, which means it does most of the animation at the beginning. For example if we use cubic-bezier(.5,.5,.5,.5) it would be completly linear. As you can see in this link, most of the animation is done in the first 5 seconds.

Go to the link, the function should be set to cubic-bezier(0.42, 0.65, 0.27, 0.99) by default but you have to set the time to 10 secs and also select the linear curve on right-hand side to compare it with the main one.

user_70987580
Related