animation | LINCARD

애니매이션

카드 제작 시 컴포넌트 이미지에 애니매이션 효과를 줄 수 있습니다.
컴포넌트 한개에 등록 가능한 애니매이션 효과는 5개까지 가능합니다.
아래 이미지들에 움직임이 없으면 FAQ(카드에 적용한 애니매이션이 동작하지 않습니다.) 부분을 참고하세요.

요소가 화면에 표시된 상태에서 무한 반복되는 강조 효과입니다. 배너·버튼 등 시선을 끌어야 할 핵심 요소에 활용하세요.

bounce

flash

pulse

rubberBand

shakeX

shakeY

headShake

swing

tada

wobble

jello

heartBeat

요소가 화면에 나타날 때 실행되는 효과입니다. 페이지 로드나 스크롤 진입 시 자연스러운 연출에 활용하세요.

backInDown

backInLeft

backInRight

backInUp

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInUp

fadeIn

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig

fadeInTopLeft

fadeInTopRight

fadeInBottomLeft

fadeInBottomRight

lightSpeedInRight

lightSpeedInLeft

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

jackInTheBox

rollIn

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

slideInDown

slideInLeft

slideInRight

slideInUp

요소가 화면에서 사라질 때 실행되는 효과입니다. 요소 숨김·삭제·슬라이드 전환 시 활용하세요.

backOutDown

backOutLeft

backOutRight

backOutUp

bounceOut

bounceOutDown

bounceOutLeft

bounceOutRight

bounceOutUp

fadeOut

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

fadeOutTopLeft

fadeOutTopRight

fadeOutBottomRight

fadeOutBottomLeft

lightSpeedOutRight

lightSpeedOutLeft

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

hinge

rollOut

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp

slideOutDown

slideOutLeft

slideOutRight

slideOutUp

뒤집기·떨어지기 등 독특한 연출 효과입니다. 강렬한 전환이나 특별한 강조가 필요할 때 활용하세요.

flip

flipInX

flipInY

flipOutX

flipOutY

미리보기

효과를 클릭하세요

전체 목록