docs: update IonAnimation code example to code group

Author: Lexpeartha

docs/content/3.features.md

@@ -36,9 +36,28 @@ Module also offers few components made for easier and more seamless way to integ
 
 Component made specifically to make usage of Ionic's `createAnimation` easier. It has almost 1 to 1 props matching as your usual animation object. For more see [official Ionic docs](https://ionicframework.com/docs/utilities/animations) or check out [playground examples](https://github.com/danielroe/nuxt-ionic/blob/main/playground/pages/tabs/tab4.vue)
 
-Instead of using the function manually:
+You can see how it replaces usage of regular `createAnimation` function in the code example below:
 
-```vue
+::code-group
+
+```vue [IonAnimation]
+<template>
+  <IonAnimation
+    :duration="3000"
+    :iterations="Infinity"
+    :keyframes="[
+      { offset: 0, background: 'red' },
+      { offset: 0.72, background: 'var(--background)' },
+      { offset: 1, background: 'green' },
+    ]"
+    playOnMount
+  >
+    <!-- Content to animate -->
+  </IonAnimation>
+</template>
+```
+
+```vue [Manual usage]
 <script setup lang="ts">
 // Template ref of your element
 const squareRef = ref()
@@ -60,24 +79,7 @@ onMounted(() => {
 </script>
 ```
 
-You can delegate all that logic to the component:
-
-```vue
-<template>
-  <IonAnimation
-    :duration="3000"
-    :iterations="Infinity"
-    :keyframes="[
-      { offset: 0, background: 'red' },
-      { offset: 0.72, background: 'var(--background)' },
-      { offset: 1, background: 'green' },
-    ]"
-    playOnMount
-  >
-    <!-- Content to animate -->
-  </IonAnimation>
-</template>
-```
+::
 
 ::alert{type=info}
 Currently component doesn't support grouped and chained animations. For that usage we still recommend using `createAnimation` by itself