Add GIF animations about built-in transitions

docs/bespoke-template/transitions.md

@@ -71,45 +71,234 @@ Got back cover transition.
 
 ### Built-in transitions
 
-Marp CLI has provided useful 33 built-in transitions out of the box.
-
-- `none` (Default) — Disable transition
-- `clockwise`
-- `counterclockwise`
-- `cover`
-- `coverflow`
-- `cube`
-- `cylinder`
-- `diamond`
-- `drop`
-- `explode`
-- `fade`
-- `fade-out`
-- `fall`
-- `flip`
-- `glow`
-- `implode`
-- `in-out`
-- `iris-in`
-- `iris-out`
-- `melt`
-- `overlap`
-- `pivot`
-- `pull`
-- `push`
-- `reveal`
-- `rotate`
-- `slide`
-- `star`
-- `swap`
-- `swipe`
-- `swoosh`
-- `wipe`
-- `wiper`
-- `zoom`
+Marp CLI has provided useful [33 built-in transitions](../../src/engine/transition/keyframes/) out of the box. [You also can see the showcase of all transitions](https://marp-cli-page-transitions.glitch.me/) in the supported browser.
+
+<table align="center">
+  <tbody>
+    <tr>
+      <td align="center" valign="bottom"><b>none</b></td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#2">
+          <img src="./transitions/clockwise.gif" width="128" height="72" /><br />
+          <b>clockwise</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#3">
+          <img src="./transitions/counterclockwise.gif" width="128" height="72" /><br />
+          <b>counterclockwise</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#4">
+          <img src="./transitions/cover.gif" width="128" height="72" /><br />
+          <b>cover</b>
+        </a>
+      </td>
+    </tr>
+    <tr>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#5">
+          <img src="./transitions/coverflow.gif" width="128" height="72" /><br />
+          <b>coverflow</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#6">
+          <img src="./transitions/cube.gif" width="128" height="72" /><br />
+          <b>cube</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#7">
+          <img src="./transitions/cylinder.gif" width="128" height="72" /><br />
+          <b>cylinder</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#8">
+          <img src="./transitions/diamond.gif" width="128" height="72" /><br />
+          <b>diamond</b>
+        </a>
+      </td>
+    </tr>
+    <tr>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#9">
+          <img src="./transitions/drop.gif" width="128" height="72" /><br />
+          <b>drop</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#10">
+          <img src="./transitions/explode.gif" width="128" height="72" /><br />
+          <b>explode</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#11">
+          <img src="./transitions/fade.gif" width="128" height="72" /><br />
+          <b>fade</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#12">
+          <img src="./transitions/fade-out.gif" width="128" height="72" /><br />
+          <b>fade-out</b>
+        </a>
+      </td>
+    </tr>
+    <tr>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#13">
+          <img src="./transitions/fall.gif" width="128" height="72" /><br />
+          <b>fall</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#14">
+          <img src="./transitions/flip.gif" width="128" height="72" /><br />
+          <b>flip</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#15">
+          <img src="./transitions/glow.gif" width="128" height="72" /><br />
+          <b>glow</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#16">
+          <img src="./transitions/implode.gif" width="128" height="72" /><br />
+          <b>implode</b>
+        </a>
+      </td>
+    </tr>
+    <tr>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#17">
+          <img src="./transitions/in-out.gif" width="128" height="72" /><br />
+          <b>in-out</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#18">
+          <img src="./transitions/iris-in.gif" width="128" height="72" /><br />
+          <b>iris-in</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#19">
+          <img src="./transitions/iris-out.gif" width="128" height="72" /><br />
+          <b>iris-out</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#20">
+          <img src="./transitions/melt.gif" width="128" height="72" /><br />
+          <b>melt</b>
+        </a>
+      </td>
+    </tr>
+    <tr>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#21">
+          <img src="./transitions/overlap.gif" width="128" height="72" /><br />
+          <b>overlap</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#22">
+          <img src="./transitions/pivot.gif" width="128" height="72" /><br />
+          <b>pivot</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#23">
+          <img src="./transitions/pull.gif" width="128" height="72" /><br />
+          <b>pull</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#24">
+          <img src="./transitions/push.gif" width="128" height="72" /><br />
+          <b>push</b>
+        </a>
+      </td>
+    </tr>
+    <tr>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#25">
+          <img src="./transitions/reveal.gif" width="128" height="72" /><br />
+          <b>reveal</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#26">
+          <img src="./transitions/rotate.gif" width="128" height="72" /><br />
+          <b>rotate</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#27">
+          <img src="./transitions/slide.gif" width="128" height="72" /><br />
+          <b>slide</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#28">
+          <img src="./transitions/star.gif" width="128" height="72" /><br />
+          <b>star</b>
+        </a>
+      </td>
+    </tr>
+    <tr>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#29">
+          <img src="./transitions/swap.gif" width="128" height="72" /><br />
+          <b>swap</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#30">
+          <img src="./transitions/swipe.gif" width="128" height="72" /><br />
+          <b>swipe</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#31">
+          <img src="./transitions/swoosh.gif" width="128" height="72" /><br />
+          <b>swoosh</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#32">
+          <img src="./transitions/wipe.gif" width="128" height="72" /><br />
+          <b>wipe</b>
+        </a>
+      </td>
+    </tr>
+    <tr>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#33">
+          <img src="./transitions/wiper.gif" width="128" height="72" /><br />
+          <b>wiper</b>
+        </a>
+      </td>
+      <td align="center" valign="bottom">
+        <a href="https://marp-cli-page-transitions.glitch.me/#34">
+          <img src="./transitions/zoom.gif" width="128" height="72" /><br />
+          <b>zoom</b>
+        </a>
+      </td>
+      <td></td>
+      <td></td>
+    </tr>
+  </tbody>
+</table>
 
 > **Note**
-> If the viewer has enabled the reduce motion feature on their device, the transition animation will be forced to a simple `fade` animation regardless of the specified transition. See also "[Reduce transition by viewer](#reduce-transition-by-viewer)".
+> If the viewer has enabled the reduce motion feature on their device, the transition animation will be forced to a simple `fade` animation regardless of the specified transition. See also "[Reduce transitions by a viewer](#reduce-transitions-by-a-viewer)".
 
 ### Duration
 
@@ -377,7 +566,7 @@ If there were marked elements with the same name by [`view-transition-name` CSS
 The slide author can visualize the relationship between the different elements in the two different pages. It's helpful for creating a more engaging presentation for the audience.
 
 <p align="center">
-  <a href="morphing-animation.mp4"><img src="morphing-animation.gif" alt="Morph animation example" width="480" height="270" /></a>
+  <img src="morphing-animation.gif" alt="Morph animation example" width="480" height="270" />
 </p>
 
 If there were multiple pairs defined by `view-transition-name` CSS property with different names, each elements will morph at the same time. Elements that were not marked by `view-transition-name` still follow the selected animation by `transition` local directive.
@@ -491,7 +680,7 @@ style: |
 The name of group can set through CSS variable in `style` attribute.
 
 <p align="center">
-  <a href="morphing-animation-2.mp4"><img src="morphing-animation-2.gif" alt="Use HTML to mark morphable contents" width="480" height="270" /></a>
+  <img src="morphing-animation-2.gif" alt="Use HTML to mark morphable contents" width="480" height="270" />
 </p>
 
 Due to the security reason, Marp CLI does not render raw HTML tags in Markdown by default. You have to should add `--html` option to use inline HTMLs.