doc(#508): new CSS variable use to display smoothly the images

docs/docs/components/app-components-lazy-img/app-components-lazy-img.md

@@ -110,6 +110,9 @@ The following theming options will affect this component if set on its host or p
 | --deckgo-lazy-img-display | | The display property of the image |
 | --deckgo-lazy-img-border-radius | | In case you would like to specify a border radius for the image |
 | --deckgo-lazy-img-object-fit  | | The property object-fit of the image |
+| --deckgo-lazy-img-opacity-not-loaded  | 0 | The opacity of the image when not loaded |
+| --deckgo-lazy-img-opacity-loaded  | 1 | The opacity of the image when loaded |
+| --deckgo-lazy-img-transition  | opacity 0.15s linear | The animation of the image, notably use to display smoothly the image when loaded |
 
 ### Methods
 

docs/src/app/pages/docs/components/app-components-lazy-img/app-components-lazy-img.tsx

@@ -215,6 +215,21 @@ export class AppComponentsLazyImg {
 <td></td>
 <td>The property object-fit of the image</td>
 </tr>
+<tr>
+<td>--deckgo-lazy-img-opacity-not-loaded</td>
+<td>0</td>
+<td>The opacity of the image when not loaded</td>
+</tr>
+<tr>
+<td>--deckgo-lazy-img-opacity-loaded</td>
+<td>1</td>
+<td>The opacity of the image when loaded</td>
+</tr>
+<tr>
+<td>--deckgo-lazy-img-transition</td>
+<td>opacity 0.15s linear</td>
+<td>The animation of the image, notably use to display smoothly the image when loaded</td>
+</tr>
 </tbody></table>
 <h3 id="app-components-lazy-img-methods">Methods</h3>
 <p>This component also export an async method <code>lazyLoad()</code> in case you would like to trigger &quot;manually&quot; the loading of the image.</p>

webcomponents/lazy-img/src/components/lazy-img/deckdeckgo-lazy-img.scss

@@ -34,5 +34,5 @@ img, svg {
 
   opacity: var(--deckgo-lazy-img-opacity-not-loaded, 0);
 
-  transition: var(--deckgo-lazy-img-transition, opacity 0.2s linear);
+  transition: var(--deckgo-lazy-img-transition, opacity 0.15s linear);
 }