CSS 애니메이션 방향 속성이란 무엇입니까? 알아야 할 모든 것
게시 됨: 2022-08-14CSS는 애니메이션을 만드는 데만 사용된다고 생각하십니까? 실제로 그렇습니다. 그러나 CSS를 사용하여 속도, 지속 시간, 방향, 시작 시간 등을 제어할 수도 있습니다.
애니메이션이 위쪽 또는 아래쪽 방향으로 움직이기를 원하는지 여부에 관계없이 웹 개발의 CSS animation-direction 속성을 사용하면 목표를 달성할 수 있습니다.
처음이신가요? 걱정할 필요가 없습니다! 이 블로그에서는 CSS 애니메이션 속성에 대해 모두 알게 될 것입니다.
이제 더 이상 고민하지 않고 CSS 애니메이션이 무엇인지, 사용법과 함께 이해해 보겠습니다.
CSS animation-direction 속성이란 무엇입니까?
CSS 애니메이션 방향 속성은 모두 애니메이션의 방향에 관한 것입니다. 이 속성을 설정하면 애니메이션 주기를 뒤로, 앞으로 또는 대체 방향으로 쉽게 설정할 수 있습니다.
이제 다양한 애니메이션 방향을 살펴보겠습니다.
- 애니메이션 방향: 일반;
- 애니메이션 방향: 역방향;
- 애니메이션 방향: 대체 역방향;
- 애니메이션 방향: 대체;
더 많은 도움을 드리기 위해 animation-direction 속성 구문을 공유했습니다. 이 구문이 전문가처럼 애니메이션을 만드는 데 도움이 되기를 바랍니다.
/* CSS 애니메이션 속성의 단일 애니메이션 */
- 애니메이션 방향: 일반;
- 애니메이션 방향: 역방향;
- 애니메이션 방향: 대체;
- 애니메이션 방향: 대체 역방향;
/* CSS 애니메이션 속성의 다중 애니메이션 */
- 애니메이션 방향: 일반, 역방향;
- 애니메이션 방향: 대체, 역방향, 일반;
/* CSS 애니메이션 속성의 전역 값 */
- 애니메이션 방향: 상속;
- 애니메이션 방향: 초기;
- 애니메이션 방향: 되돌리기;
- 애니메이션 방향: 설정되지 않음;
다양한 CSS 애니메이션 속성을 알았으므로 이제 CSS 애니메이션 속성의 값을 이해할 차례입니다.
CSS 애니메이션 속성 값
정상
이 속성을 사용하면 애니메이션이 앞으로 재생됩니다. 이는 모든 애니메이션 주기에 대해 애니메이션이 시작 상태로 재설정되고 다시 시작됨을 의미합니다.
값 -" Normal"은 기본적으로 CSS에서 animation-direction 속성의 기본값입니다. 따라서 이 속성을 설정하지 않으면 기본적으로 앞으로 재생됩니다.
뒤집다
역방향 애니메이션은 각 주기마다 역방향으로 수행되는 애니메이션에 관한 것입니다. 이 스타일에서는 애니메이션 단계와 타이밍 기능이 뒤로 수행됩니다.
예를 들어, easy-in 타이밍 기능은 easy-out이 됩니다.
번갈아 하는
대체 애니메이션은 각 주기의 방향을 반대로 하고 첫 번째 반복은 순방향 입니다. 카운트는 주기가 홀수인지 짝수인지를 결정하는 것입니다.
교대 역
Alternate-reverse는 첫 번째 반복이 뒤로 재생되면서 각 주기의 방향을 반대로 합니다 . 카운트는 1부터 시작하여 사이클이 짝수인지 홀수인지 결정하는 것입니다.
애니메이션 방향에 대한 CSS 약어
애니메이션 속기 CSS 속성을 사용하여 수행할 수 있는 애니메이션 방향을 포함하여 다양한 애니메이션 속성도 설정할 수 있다는 사실에 놀랄 것입니다.
CSS 애니메이션 단축 속성은 스타일 사이에 애니메이션을 적용합니다. animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-와 같은 모든 애니메이션 속성을 설정하는 약식 방법입니다. 상태.
일반적인 CSS 애니메이션 문제
애니메이션이 원하는 대로 작동하지 않거나 전혀 작동하지 않는 경우 문제에 대한 몇 가지 이유와 해결 방법은 다음과 같습니다.
@keyframes 규칙 없음
CSS 애니메이션에서 @keyframes 규칙은 애니메이션이 어떻게 보이는지 정의합니다. 보다 구체적으로, 어떤 요소 스타일이 언제 변경되는지 정의합니다. 이 규칙이 없으면 요소에 사용할 애니메이션이 없습니다. 따라서 바로 다음 번에 @keyframes 규칙이 존재하는지 확인하고 해당 규칙의 이름이 대상 요소의 애니메이션 이름과 일치하는지 확인합니다.
애니메이션 지속 시간이 설정되지 않았습니다.
요소에 키프레임 규칙을 할당했지만 애니메이션 지속 시간을 설정하지 않으면 여전히 재생되지 않는 것으로 가정해 보겠습니다. 기본적으로 0초 길이는 CSS 애니메이션 주기입니다.
이 주기를 무시하려면 애니메이션 이름과 동일한 블록에서처럼 초 값을 사용하여 대상 요소에 애니메이션 지속 시간 규칙을 통합해야 합니다.
애니메이션이 너무 빨리 시작됩니다.
때로는 더 높은 소비자 경험을 위해 애니메이션 시작보다 빨리 연기해야 할 수도 있습니다. 애니메이션 연기 소지품으로 이것을 달성하십시오.
애니메이션 불가능 CSS 속성
애니메이션이 작동하지 않는 또 다른 이유는 애니메이션할 수 없는 CSS 속성에 애니메이션을 적용하려고 하기 때문일 수 있습니다.
CSS 애니메이션은 지원되지 않습니다
최대 현재 모바일 및 컴퓨터 브라우저에서 CSS 애니메이션 그림. 그러나 브라우저 지원 손실로 인해 의심할 여지 없이 오래된 브라우저나 수년 동안 최신 버전이 아닌 브라우저 모델을 사용하는 경우 애니메이션이 작동하지 않습니다.
브라우저를 업데이트했는데도 문제가 있는 경우 실제 정책에 공급자 접두어가 있는 애니메이션 정책을 추가로 포함하고 애니메이션을 다시 시도하십시오.
CSS 약어가 잘못 작성되었습니다.
CSS 속기는 CSS를 정리하고 파일의 코드 양을 줄이는 훌륭한 방법입니다. 애니메이션 소지품은 해당 CSS 하우스의 약어입니다.
- 애니메이션 기간
- 애니메이션 호출
- 애니메이션 연기
- 애니메이션 연출
- 애니메이션 채우기 모드
- 애니메이션 반복 의존
- 애니메이션 플레이 국가
- 애니메이션 타이밍 기능
애니메이션 기간과 애니메이션 호출에 대한 두 가지 값이 필요합니다. 그 외에도 값의 순서에 따라 어떤 애니메이션 소유물에 어떤 가격이 할당되는지가 결정됩니다.
잘못 정렬된 값은 예상과 다르게 동작하는 애니메이션을 가져와야 합니다. 따라서 애니메이션 속기의 사용이 속하는 경우 해당 값이 적절한 순서 내에서 인덱싱되는지 확인하십시오.
느린 성능
CSS 애니메이션은 다른 종류의 인터넷 애니메이션보다 전반적인 성능이 더 높은 경향이 있습니다. 그러나 이제 더 이상 모든 CSS 애니메이션이 동일하지 않으며 몇 가지 활기찬 패턴이 다른 패턴보다 전반적인 성능을 점차적으로 크게 떨어뜨릴 것입니다.
가장 쉬운 CSS 애니메이션은 웹 페이지 로드 시간에 큰 영향을 미치지 않습니다. 그러나 애니메이션에 업로드하는 결과가 클수록 전반적인 성능 문제가 발생할 가능성이 훨씬 높아집니다.
전반적인 성능 저하를 방지하기 위해 다시 그리기를 유발하는 애니메이션 사용을 제한하는 것이 좋습니다. 페인트는 화면에서 픽셀을 사용하여 인터넷 웹 페이지 픽셀의 가시적 쇼를 만드는 브라우저입니다. 페인트는 상당한 양의 처리 능력을 사용하므로 애니메이션으로 인해 다양한 재페인트를 가능한 한 제한해야 합니다.
불행히도 애니메이션 가능한 최대 CSS 하우스는 변경되는 동안 다시 그리기를 유발합니다. 이 변환(예: 크기, 회전 및 위치) 및 불투명도에 대한 예외는 전체 성능에 최소한의 영향을 미치면서 활발할 수 있습니다. 다음은 CSS 하우스가 생동감 있는 동안 다시 그리기를 유발하는 참조입니다.
그래도 애니메이션을 완전히 폐기하지 않도록 설득하지 마십시오. 속도 문제가 있는 경우 많은 것을 즉시 실행하거나 하나 이상의 방대한 세부 사항 또는 요소 구성에 애니메이션을 사용하려고 하기 때문일 수 있습니다.
웹사이트에서 CSS 애니메이션은 일류이지만 경험을 아름답게 하기 위해 미묘하게 사용되므로 방문자와 상호 작용하는 복잡한 애니메이션을 원하는지 여부를 기억하십시오.
마지막 말
예, HubSpot을 사용하면 올바른 CSS 코드를 사용하여 애니메이션의 방향을 제어할 수 있습니다. 잘! CSS 애니메이션 방향 속성은 많은 사람들이 모르고 있는 것 중 하나라는 데 전적으로 동의합니다.
그러나 예, 이 블로그를 읽은 후에는 애니메이션을 제어하고 웹 사이트 디자인에 매력적이고 사용자 친화적인 모양을 제공하는 방법에 확실히 익숙해질 것입니다. 그래서, 당신은 무엇을 기다리고 있습니까? 타겟 고객에게 어필할 수 있는 디자인을 만들 준비를 하세요.
여전히 사이트를 디자인하는 데 도움이 필요하면 언제든지 저희에게 연락하십시오. 우리의 전문가들이 당신을 도울 것입니다.
편집자: 디비아