---
title: "Fade Animation | @animate"
description: "Apply fade in or fade out animations to elements."
keywords: ["animation", "fade", "opacity", "transition"]
---

# Fade Animation

Apply fade in or fade out animations to elements.

Usage:

- `@animate fade-in-*;`
- `@animate fade-out-*;`

<Alert variant="warning">

This must be used with `enter` and `exit` animation to take the effect.

</Alert>

<Alert variant="info">

This page contains only the **property configuration reference**. Complete
documentation and usage examples will be added progressively in future updates.

</Alert>

---

<section>

## Reference

```js title="shilp.config.js"
const shilpConfig = {
	source: "react",

	properties: {
		animate: {
			fade: {
				in: {
					property: "--entr-opct: <v><i>;",
					themeKey: "fractions",
					values: {
						DEFAULT: 1,
					},
				},

				out: {
					property: "--ext-opct: <v><i>;",
					themeKey: "fractions",
					values: {
						DEFAULT: 1,
					},
				},
			},
		},
	},
};

export default shilpConfig;
```

</section>