Google Web Designer에서는 애니메이션의 시작 및 종료 지점을 정의하는 키프레임을 사용하여 애니메이션을 제작할 수 있습니다. 각 키프레임에서 애니메이션이 적용된 요소의 속성을 설정하면 Web Designer에서 키프레임 사이의 전환 및 트윈을 처리합니다.
예:
- 첫 번째 키프레임에서는 페이지 왼쪽에 빨간색 직사각형이 있습니다.
- 2초 후의 두 번째 키프레임에서는 파란색 직사각형이 페이지 오른쪽에 표시되도록 직사각형의 색상 및 위치 속성을 변경합니다.
Web Designer에서는 보라색 음영을 통한 점진적인 색상 변화와 페이지를 가로지르는 움직임을 적용하여 애니메이션을 생성합니다.
CSS에서는 기존 HTML 요소에 애니메이션을 적용할 수 있지만 요소를 추가하거나 삭제할 수는 없습니다. 대신 요소의 visibility 속성에 애니메이션을 적용하여 요소를 숨기고 표시하세요.
애니메이션은 CSS를 사용하여 생성되므로 반응형 디자인 도구를 사용할 때 다양한 크기의 표시 영역에 맞게 여러 애니메이션 순서를 생성할 수 있습니다.
애니메이션 제작 모드
두 가지 애니메이션 모드, 즉 빠른 모드와 고급 모드 중에서 선택하세요. 두 모드 간에는 언제든 전환이 가능합니다.
빠른 모드애니메이션을 장면별로 제작하여 전체 페이지의 새로운 보기를 추가하고 애니메이션을 적용할 모든 요소를 변경할 수 있습니다. 타임라인에는 스토리보드처럼 각 장면의 미리보기 이미지가 순서대로 표시됩니다. 자세히 알아보기 |
고급 모드요소에 개별적으로 애니메이션을 적용하여 더 복잡한 애니메이션을 만들 수 있습니다. 각 요소는 타임라인에서 자체 레이어를 가지며, 키프레임 마커는 타이밍에 따라 타임라인 전체에 걸쳐 간격이 지정됩니다. 자세히 알아보기 |
AMP HTML 광고의 제한사항
AMP HTML 광고에서는 다음과 같은 CSS 속성에만 애니메이션을 적용할 수 있습니다.
transform(요소를 이동, 회전, 왜곡하거나 요소 크기를 조절할 수 있도록 허용)opacityvisibility