Skip to content

Commit

Permalink
🎞️ add README section about keyframes (#26)
Browse files Browse the repository at this point in the history
  • Loading branch information
diragb authored Jun 2, 2022
1 parent a8a2620 commit 0d4dcb1
Showing 1 changed file with 19 additions and 1 deletion.
20 changes: 19 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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";
Expand Down

0 comments on commit 0d4dcb1

Please sign in to comment.