How to stop my opacity animation effect, I want my opacity style from 0 to 1 without animation

[alechance]

Based on @Carl codepen, I would like to animate text opacity animation without any effect, which means my opacity should go from 0 to 1 instantly. In my case I have images instead of text, the transition is "fading" from one image to another.  Thank you for your help.

See the Pen oNPOpKm by alechance-the-decoder (@alechance-the-decoder) on CodePen

[elegantseagulls]

Adding ease: 'steps(1)'  to your from and to will fix this, otherwise you can change duration to 0 and add a delay.

[alechance]

Thank you @elegantseagulls this is indeed a very simple solution. However there is a small delay on my first item before the opacity goes to 1 when my document is loaded, is it possible to force my first item to have an opacity to 1 to avoid this? Here is my updated codepen  To fix this, I have a small delay in css so the opacity animation has time to be applied