From 0d4dcb1ed73cd728e38f1e569234740df09402f0 Mon Sep 17 00:00:00 2001
From: Dirag Biswas <hey@diragb.dev>
Date: Thu, 2 Jun 2022 23:10:55 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=9E=EF=B8=8F=20add=20README=20section?=
 =?UTF-8?q?=20about=20`keyframes`=20(#26)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e26b413..f5f7418 100644
--- a/README.md
+++ b/README.md
@@ -148,6 +148,24 @@ const styleTag = `<style id="_goober">${extractCss()}</style>`;
 // Note: To be able to `hydrate` the styles you should use the proper `id` so `goober` can pick it up and use it as the target from now on
 ```
 
+### `keyframes`
+
+- `@returns {String}`
+
+Add keyframe animations to a style component.
+
+```js
+const rotate = keyframes`
+  100% { 
+    transform:rotate(360deg); 
+  }
+`
+
+const LoadingIcon = styled.img`
+  animation: ${ rotate } 1s linear infinite;
+`
+```
+
 ### `createGlobalStyles`
 
 For a global style component, you call `createGlobalStyles` with your global tagged template.
@@ -172,7 +190,7 @@ const GlobalStyles = () => {
 
 ### `Theme`
 
-You can set a Theme Provider (remember to use state or signals if you want it to be reactive)
+You can set a Theme Provider (remember to use state or signals if you want it to be reactive).
 
 ```jsx
 import { styled, ThemeProvider } from "solid-styled-components";