From 62a3a1eb98898c9c8b1b5d979afc558e7ca8a75c Mon Sep 17 00:00:00 2001
From: Simon Asika <asika32764@gmail.com>
Date: Sat, 21 Oct 2023 14:23:47 +0800
Subject: [PATCH] fix: update README

---
 README.md | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 860a763..feba0a9 100644
--- a/README.md
+++ b/README.md
@@ -38,20 +38,42 @@ Support for:
 
 ## Installation
 
+From NPM
+
 ```shell
 npm i @asika32764/vue-animate --save
 
 yarn add @asika32764/vue-animate
 ```
 
-## Transitions
+CDN
+
+```html
+<link rel="stylesheet" href="https://www.unpkg.com/@asika32764/vue-animate/dist/vue-animate.min.css"/>
+```
+
+## Import
 
-Import full animations.
+Import animations for JS Bundler.
 
 ```ts
 import '@asika32764/vue-animate/dist/vue-animate.css';
 ```
 
+Import in CSS or SCSS file.
+
+```css
+@import "@asika32764/vue-animate/dist/vue-animate.css";
+
+/* If you want to override CSS variables, write it just after importing */
+:root {
+  --animate-duration: .3s;
+  --animate-delay: 0;
+}
+```
+
+## Transitions
+
 Use [Vue.js transitions](https://vuejs.org/guide/built-ins/transition.html "Vue.js Transitions") as you normally would, but for the transition name you will use one of [Animate.css animations](https://animate.style/#utilities "animations") **removing** the `animate__` and `in/Out` from the name.
 
 For example, if you want to use `animate__animated animate__fadeInLeft` and `animate__fadeInLeft` on your element, You could write: