animation.css 사용법
백업/자료 2024. 12. 15.
https://gongmeda.tistory.com/9
데모 사이트 https://animate.style/
| bounce | flash | pulse | rubberBand |
| shake | headShake | swing | tada |
| wobble | jello | bounceIn | bounceInDown |
| bounceInLeft | bounceInRight | bounceInUp | bounceOut |
| bounceOutDown | bounceOutLeft | bounceOutRight | bounceOutUp |
| fadeIn | fadeInDown | fadeInDownBig | fadeInLeft |
| fadeInLeftBig | fadeInRight | fadeInRightBig | fadeInUp |
| fadeInUpBig | fadeOut | fadeOutDown | fadeOutDownBig |
| fadeOutLeft | fadeOutLeftBig | fadeOutRight | fadeOutRightBig |
| fadeOutUp | fadeOutUpBig | flipInX | flipInY |
| flipOutX | flipOutY | lightSpeedIn | lightSpeedOut |
| rotateIn | rotateInDownLeft | rotateInDownRight | rotateInUpLeft |
| rotateInUpRight | rotateOut | rotateOutDownLeft | rotateOutDownRight |
| rotateOutUpLeft | rotateOutUpRight | hinge | jackInTheBox |
| rollIn | rollOut | zoomIn | zoomInDown |
| zoomInLeft | zoomInRight | zoomInUp | zoomOut |
| zoomOutDown | zoomOutLeft | zoomOutRight | zoomOutUp |
| slideInDown | slideInLeft | slideInRight | slideInUp |
| slideOutDown | slideOutLeft | slideOutRight | slideOutUp |
| heartBeat |
추가 가능 클래스
infinite :애니메이션 무한 재생
delay-1s:1초 딜레이
delay-2s:2초 딜레이
delay-3s:3초 딜레이
delay-4s:4초 딜레이
delay-5s:5초 딜레이
slow:2초로 애니메이션 연장
slower:3초로 애니메이션 연장
fast:.8초로 애니메이션 단축
faster:.5초로 애니메이션 단축
그 외 사용법
그냥 요소 css에
anmation:fadeIn 0.3s;
이런식으로 넣어도 작동은 하는듯
