# Animate.css - 크로스 브라우저 애니메이션 라이브러리

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

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=2242](https://news.hada.io/topic?id=2242)
- GeekNews Markdown: [https://news.hada.io/topic/2242.md](https://news.hada.io/topic/2242.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2020-06-11T09:20:06+09:00
- Updated: 2020-06-11T09:20:06+09:00
- Original source: [animate.style](https://animate.style/)
- Points: 2
- Comments: 0

## Topic Body

- 클래스 지정만으로 댜앙한 애니메이션 효과들을 쉽게 추가 가능

- keyframes 직접 사용 가능

- CSS 변수로 지속시간, 지연, 반복 설정

- 효과들

ㅤ→ 눈길끌기 : bounce, flash, pulse, rubberBand, shakeX/Y, headShake, swing, tada, wobble, jello, heartBeat

ㅤ→ In/Out : back, fade, LightSpeed, Rotate, Zoom, Slide

ㅤ→ 특수 : hinge, jackInTheBox, Flipper..

## Comments



_No public comments on this page._