animation.css 사용법
소스나물2024.11.17 10:50

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초로 애니메이션 단축
11.17 10:52
그 외 사용법

그냥 요소 css에
anmation:fadeIn 0.3s;

이런식으로 넣어도 작동은 하는듯
11.17 10:54
▲ ▼