diff --git a/README.md b/README.md
index 58a028b..f882b7b 100644
--- a/README.md
+++ b/README.md
@@ -74,12 +74,13 @@ const show = ref(true)
 
 -Library is fully prop based so you can customize the animations based on your need
 
-| Prop         | Type      | Default   | Description                                                                           |
-| ------------ | --------- | --------- | ------------------------------------------------------------------------------------- |
-| **appear**   | `boolean` | `'false'` | If true animation will run on load                                                    |
-| **duration** | `number`  | `500`     | Duration of the animation in milliseconds.                                            |
-| **delay**    | `number`  | `0`       | Delay before the animation starts in milliseconds.                                    |
-| **easing**   | `string`  | `'ease'`  | CSS easing function to control the transition curve(CSS acceptable timing functions). |
+| Prop          | Type              | Default   | Description                                                                                    |
+| ------------- | ----------------- | --------- | ---------------------------------------------------------------------------------------------- |
+| **appear**    | `boolean`         | `'false'` | If true animation will run on load                                                             |
+| **duration**  | `number`          | `500`     | Duration of the animation in milliseconds.                                                     |
+| **delay**     | `number`          | `0`       | Delay before the animation starts in milliseconds.                                             |
+| **easing**    | `string`          | `'ease'`  | CSS easing function to control the transition curve(CSS acceptable timing functions).          |
+| **iteration** | `string , number` | `5`       | Number of time an animation would run based on CSS iteration-count(Only Attention Animations). |
 
 ---
 
diff --git a/package.json b/package.json
index 4c9b397..2a4276b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-transify",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": false,
   "type": "module",
   "main": "dist/vue-transify.umd.js",
diff --git a/playground/App.vue b/playground/App.vue
index b2b4b75..a926166 100644
--- a/playground/App.vue
+++ b/playground/App.vue
@@ -10,6 +10,7 @@
           See Motions
         </button>
       </div>
+
       <small class="main-container--version"
         >V-1.2.0 | Developed by
         <a href="https://github.com/Redskullvue">RedskullVue </a>
@@ -53,6 +54,12 @@ import ZoomDown from '@/components/ZoomDown.vue'
 import FlipX from '@/components/FlipX.vue'
 import FlipY from '@/components/FlipY.vue'
 import PageTransitionHelper from '@/components/PageTransitionHelper.vue'
+import Pulse from '@/components/Pulse.vue'
+import Flash from '@/components/Flash.vue'
+import ShakeX from '@/components/ShakeX.vue'
+import ShakeY from '@/components/ShakeY.vue'
+import Swing from '@/components/Swing.vue'
+import Tada from '@/components/Tada.vue'
 
 const showSideBar = ref(true)
 const currentAnimation = shallowRef(Fade)
@@ -75,6 +82,12 @@ const animationMap = {
   ZoomDown,
   FlipX,
   FlipY,
+  Pulse,
+  Flash,
+  ShakeX,
+  ShakeY,
+  Swing,
+  Tada,
 }
 
 const setAnimation = (name) => {
diff --git a/playground/components/sideBar.vue b/playground/components/sideBar.vue
index f47b021..f87ee06 100644
--- a/playground/components/sideBar.vue
+++ b/playground/components/sideBar.vue
@@ -29,6 +29,10 @@ import { ref } from 'vue'
 const emits = defineEmits(['closeSideBar', 'selectAnimation'])
 
 const animations = ref([
+  {
+    title: 'Attention Animations',
+    children: ['Pulse', 'Flash', 'ShakeX', 'ShakeY', 'Swing', 'Tada'],
+  },
   {
     title: 'Slides',
     children: ['SlideInUp', 'SlideInDown', 'SlideInLeft', 'SlideInRight'],
diff --git a/src/components/Flash.vue b/src/components/Flash.vue
new file mode 100644
index 0000000..b3e95e5
--- /dev/null
+++ b/src/components/Flash.vue
@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="vt-attention-flash"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-delay': delay + 'ms',
+      '--animation-easing': easing,
+      '--animation-iteration-count': iteration,
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { commonProps } from './commonProps'
+
+const props = defineProps({ ...commonProps })
+</script>
diff --git a/src/components/Pulse.vue b/src/components/Pulse.vue
new file mode 100644
index 0000000..293405d
--- /dev/null
+++ b/src/components/Pulse.vue
@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="vt-attention-pulse"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-delay': delay + 'ms',
+      '--animation-easing': easing,
+      '--animation-iteration-count': iteration,
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { commonProps } from './commonProps'
+
+const props = defineProps({ ...commonProps })
+</script>
diff --git a/src/components/ShakeX.vue b/src/components/ShakeX.vue
new file mode 100644
index 0000000..0354e1a
--- /dev/null
+++ b/src/components/ShakeX.vue
@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="vt-attention-shakex"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-delay': delay + 'ms',
+      '--animation-easing': easing,
+      '--animation-iteration-count': iteration,
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { commonProps } from './commonProps'
+
+const props = defineProps({ ...commonProps })
+</script>
diff --git a/src/components/ShakeY.vue b/src/components/ShakeY.vue
new file mode 100644
index 0000000..77db139
--- /dev/null
+++ b/src/components/ShakeY.vue
@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="vt-attention-shakey"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-delay': delay + 'ms',
+      '--animation-easing': easing,
+      '--animation-iteration-count': iteration,
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { commonProps } from './commonProps'
+
+const props = defineProps({ ...commonProps })
+</script>
diff --git a/src/components/Swing.vue b/src/components/Swing.vue
new file mode 100644
index 0000000..df58320
--- /dev/null
+++ b/src/components/Swing.vue
@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="vt-attention-swing"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-delay': delay + 'ms',
+      '--animation-easing': easing,
+      '--animation-iteration-count': iteration,
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { commonProps } from './commonProps'
+
+const props = defineProps({ ...commonProps })
+</script>
diff --git a/src/components/Tada.vue b/src/components/Tada.vue
new file mode 100644
index 0000000..8d4a1e3
--- /dev/null
+++ b/src/components/Tada.vue
@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="vt-attention-tada"
+    :style="{
+      '--animation-duration': duration + 'ms',
+      '--animation-delay': delay + 'ms',
+      '--animation-easing': easing,
+      '--animation-iteration-count': iteration,
+    }"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { commonProps } from './commonProps'
+
+const props = defineProps({ ...commonProps })
+</script>
diff --git a/src/components/commonProps.js b/src/components/commonProps.js
index d985de1..f4487de 100644
--- a/src/components/commonProps.js
+++ b/src/components/commonProps.js
@@ -3,4 +3,5 @@ export const commonProps = {
   duration: { type: Number, default: 500 },
   easing: { type: String, default: 'ease' },
   delay: { type: Number, default: 0 },
+  iteration: { type: [Number, String], default: 5 },
 }
diff --git a/src/index.js b/src/index.js
index b062345..d524dcc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,9 @@
 // This file is only used for exports to the built version
 import './styles/animations.css'
-import Fade from '@/components/Fade.vue'
-import SlideInLeft from '@/components/SlideInLeft.vue'
-import SlideInRight from '@/components/SlideInRight.vue'
-import SlideInUp from '@/components/SlideInUp.vue'
+import Fade from './components/Fade.vue'
+import SlideInLeft from './components/SlideInLeft.vue'
+import SlideInRight from './components/SlideInRight.vue'
+import SlideInUp from './components/SlideInUp.vue'
 import SlideInDown from './components/SlideInDown.vue'
 import BounceDown from './components/BounceDown.vue'
 import BounceIn from './components/BounceIn.vue'
@@ -16,6 +16,12 @@ import ZoomUp from './components/ZoomUp.vue'
 import ZoomIn from './components/ZoomIn.vue'
 import FlipX from './components/FlipX.vue'
 import FlipY from './components/FlipY.vue'
+import Pulse from './components/Pulse.vue'
+import Flash from './components/Flash.vue'
+import ShakeX from './components/ShakeX.vue'
+import ShakeY from './components/ShakeY.vue'
+import Swing from './components/Swing.vue'
+import Tada from './components/Tada.vue'
 import PageTransitionHelper from './components/PageTransitionHelper.vue'
 
 export {
@@ -35,5 +41,11 @@ export {
   ZoomIn,
   FlipX,
   FlipY,
+  Pulse,
+  Flash,
+  ShakeX,
+  ShakeY,
+  Swing,
+  Tada,
   PageTransitionHelper,
 }
diff --git a/src/styles/animations.css b/src/styles/animations.css
index 6a97c65..b71e25c 100644
--- a/src/styles/animations.css
+++ b/src/styles/animations.css
@@ -16,6 +16,189 @@ GLOBAL VARIABLES (defaults)
 /* NOTE : All Class prefix should start in lowercase */
 /* NOTE : All Keyframes should start with UPPERCASE , Also use camelCase  : SlideInRight , SlideInLeft  */
 
+/* Attention Animations */
+.vt-attention-pulse {
+  animation: vt-pulse var(--animation-duration) var(--animation-easing) var(--animation-delay)
+    var(--animation-iteration-count);
+}
+
+@keyframes vt-pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.vt-attention-flash {
+  animation: vt-flash var(--animation-duration) var(--animation-easing) var(--animation-delay)
+    var(--animation-iteration-count);
+}
+@keyframes vt-flash {
+  0% {
+    opacity: 100%;
+  }
+  50% {
+    opacity: 10%;
+  }
+  100% {
+    opacity: 100%;
+  }
+}
+
+.vt-attention-shakex {
+  animation: vt-shakex var(--animation-duration) var(--animation-easing) var(--animation-delay)
+    var(--animation-iteration-count);
+}
+
+@keyframes vt-shakex {
+  0% {
+    transform: translateX(0) rotate(0);
+  }
+  10% {
+    transform: translateX(-12px) rotate(-1deg);
+  }
+  20% {
+    transform: translateX(12px) rotate(1deg);
+  }
+  30% {
+    transform: translateX(-10px) rotate(-1deg);
+  }
+  40% {
+    transform: translateX(10px) rotate(1deg);
+  }
+  50% {
+    transform: translateX(-8px) rotate(-1deg);
+  }
+  60% {
+    transform: translateX(8px) rotate(1deg);
+  }
+  70% {
+    transform: translateX(-6px) rotate(-0.8deg);
+  }
+  80% {
+    transform: translateX(6px) rotate(0.8deg);
+  }
+  90% {
+    transform: translateX(-4px) rotate(-0.5deg);
+  }
+  100% {
+    transform: translateX(0) rotate(0);
+  }
+}
+
+.vt-attention-shakey {
+  animation: vt-shakey var(--animation-duration) var(--animation-easing) var(--animation-delay)
+    var(--animation-iteration-count);
+}
+
+@keyframes vt-shakey {
+  0% {
+    transform: translateY(0) rotate(0);
+  }
+  10% {
+    transform: translateY(-12px) rotate(-1deg);
+  }
+  20% {
+    transform: translateY(12px) rotate(1deg);
+  }
+  30% {
+    transform: translateY(-10px) rotate(-1deg);
+  }
+  40% {
+    transform: translateY(10px) rotate(1deg);
+  }
+  50% {
+    transform: translateY(-8px) rotate(-1deg);
+  }
+  60% {
+    transform: translateY(8px) rotate(1deg);
+  }
+  70% {
+    transform: translateY(-6px) rotate(-0.8deg);
+  }
+  80% {
+    transform: translateY(6px) rotate(0.8deg);
+  }
+  90% {
+    transform: translateY(-4px) rotate(-0.5deg);
+  }
+  100% {
+    transform: translateY(0) rotate(0);
+  }
+}
+
+.vt-attention-swing {
+  animation: vt-swing var(--animation-duration) var(--animation-easing) var(--animation-delay)
+    var(--animation-iteration-count);
+}
+
+@keyframes vt-swing {
+  0% {
+    transform: translateY(0) rotate(0);
+  }
+  20% {
+    transform: translateY(5px) rotate(8deg);
+  }
+  40% {
+    transform: translateY(-5px) rotate(-8deg);
+  }
+  60% {
+    transform: translateY(2px) rotate(5deg);
+  }
+  80% {
+    transform: translateY(-2px) rotate(-5deg);
+  }
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+}
+
+.vt-attention-tada {
+  animation: vt-tada var(--animation-duration) var(--animation-easing) var(--animation-delay)
+    var(--animation-iteration-count);
+}
+
+@keyframes vt-tada {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  10% {
+    transform: rotate(-5deg) scale(0.9);
+  }
+  20% {
+    transform: rotate(5deg) scale(1.1);
+  }
+  30% {
+    transform: rotate(-4deg) scale(1.1);
+  }
+  40% {
+    transform: rotate(4deg) scale(1.1);
+  }
+  50% {
+    transform: rotate(-3deg) scale(1.1);
+  }
+  60% {
+    transform: rotate(3deg) scale(1.1);
+  }
+  70% {
+    transform: rotate(-2deg) scale(1.1);
+  }
+  80% {
+    transform: rotate(2deg) scale(1.1);
+  }
+  90% {
+    transform: rotate(-1deg) scale(1.1);
+  }
+  100% {
+    transform: rotate(0deg) scale(1);
+  }
+}
+
 /* Fade Animation */
 .fade-enter-active,
 .fade-leave-active {