popmotion-pose
Version:
A declarative animation library for HTML and SVG
22 lines (16 loc) • 532 B
Markdown
title: CSS filters
description: A live example of animating CSS filters with React Pose
category: react
# CSS filters
CSS filters can be animated by settings `filter` as you [would in CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/filter):
```javascript
const config = {
hoverable: true,
init: { filter: 'grayscale(80%) blur(2px)' },
hover: { filter: 'grayscale(0%) blur(0px)' }
};
```
Hover over, or tap, the image in this example to see the effect in action.
<CodeSandbox height="500" id="31886n8vp1" />