# AnimXYZ - 컴포저블 CSS 애니메이션 툴킷

> Clean Markdown view of GeekNews topic #3698. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=3698](https://news.hada.io/topic?id=3698)
- GeekNews Markdown: [https://news.hada.io/topic/3698.md](https://news.hada.io/topic/3698.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2021-02-07T11:26:17+09:00
- Updated: 2021-02-07T11:26:17+09:00
- Original source: [animxyz.com](https://animxyz.com/)
- Points: 14
- Comments: 0

## Topic Body

- Vue, React, SCSS 등에서 사용 가능

- CSS Variable을 이용해서 키프레임 작성없이 다양한 고유 애니메이션 생성가능

ㅤ→ 몇줄 안되는 코드로 훌륭한 애니메이션 적용

ㅤ→ xyz attr 로 애니메이션 컨텍스트 생성 : xyz="fade small up"

ㅤ→ xyz-nested 클래스와 delay, stagger 등으로 순서 조정

ㅤ→ CSS 변수 직접 변경 가능

ㅤㅤ--xyz-translate-x: -100vw;

## Comments



_No public comments on this page._