애니메이션 설정

Slidde.co는 웹 요소에 표준 CSS 키프레임 애니메이션을 쉽게 적용할 수 있도록 합니다. 시작하는 데 도움이 되는 단계별 가이드를 소개합니다.

사이드바의 애니메이션 옵션

1. 요소 선택: 페이지에서 아무 요소나 클릭하세요.
2. 애니메이션 모달 열기: 오른쪽 사이드바에서 아래로 스크롤하여 애니메이션 옵션을 찾습니다. 클릭하여 모달 창을 엽니다.

프리셋 애니메이션 사용

• 프리셋으로 시작하기: 프리셋 애니메이션으로 시작하는 것을 권장합니다. 필요에 맞게 수정할 수 있습니다.
• 더 많은 프리셋 찾기: Animate.css에서 프리셋 애니메이션 목록을 찾을 수 있습니다. 특정 애니메이션이 필요하면 알려주시면 목록에 추가할 수 있습니다.

애니메이션 사용자 정의

애니메이션 모달은 CSS 키프레임 애니메이션 설정 과정을 저코드 인터페이스로 단순화하여 코딩에 익숙하지 않더라도 접근할 수 있게 합니다.

키프레임 애니메이션은 특정 퍼센트에 대한 CSS 속성을 정의하는 곳입니다. 브라우저가 전환을 처리해 줍니다.

예를 들어, 4초의 지속 시간을 가진 다음과 같은 키프레임이 있다면:

0% translateX(0)

50% translateX(-20px)

100% trasnlateX(0)

객체는 2초 동안 아래로 20px 이동한 후, 2초 동안 원래 위치로 20px 위로 이동합니다.

키프레임 애니메이션에 문제가 있거나 더 알고 싶다면:

• 온라인 검색: 특정 질문을 구글링하세요. 많은 예제와 리소스를 찾을 수 있습니다.
• CSS 키프레임 튜토리얼: 공식 MDN의 CSS 키프레임 가이드를 참조하여 포괄적인 정보를 얻으세요.

자식 요소 애니메이션

Targets를 &>*로 설정하여 루트 요소의 자식을 타겟팅할 수 있습니다.

지연 시간 조정

다음 값으로 지연 시간을 변경하면, 계단식 효과가 적용됩니다.

targets: &>*
delay: anime.stagger(100) // 각 요소에 대해 지연 시간이 100ms씩 증가합니다.

targets: &>*
delay: anime.stagger(100, {start: 500}) // 지연 시간이 500ms에서 시작하고 각 요소에 대해 100ms씩 증가합니다.

더 많은 예제를 보려면 계단식 기본을 참조하세요.

텍스트 계단식 효과

이것은 텍스트 컴포넌트에 적용됩니다.

대상을 "모든 글자"(& .letter)로 설정하면, 각 글자에 계단식 효과가 적용됩니다.

CSS animation 속성 사용

일반 CSS 애니메이션은 사용자 정의 스타일의 모든 요소에 항상 사용할 수 있습니다. 그러나 편집기에서 더 쉽게 편집할 수 있도록 특정 CSS 규칙에 대해 캔버스에서 비활성화를 켜야 할 수도 있습니다.