비틀 거리는 애니메이션을 만들기위한 다양한 접근법

기본 애니메이션은 간단합니다. 키 프레임을 정의하고 이름 애니메이션을 정의하여 요소에 적용하십시오. 그러나 이상적인 애니메이션 효과를 달성하려면 때로는 더 복잡한 기술이 필요합니다. 예를 들어, 사운드 이퀄라이저는 각 막대에 동일한 애니메이션을 사용할 수 있지만 독립 애니메이션의 환상을 만들기 위해 인터리브됩니다.

최근 대시 보드를 만들 때 위젯 중 하나의 항목이 인터레이스 애니메이션에 표시되기를 원합니다.

위의 사운드 이퀄라이저와 마찬가지로 :nth-child Selector를 사용하기 시작했습니다. 나는 변하지 않는 목록을 사용합니다 (<ul></ul> ) 부모 컨테이너로서, 클래스를 제공하고 :nth-child 의사 선택기를 사용하여 각 목록 항목의 애니메이션을 오프셋하여 animation-delay 으로.

 .my-list li {
  애니메이션 : My-Animation 300ms 편의성;
}

.my-list li : nth-Child (1) {
  애니메이션 지연 : 100ms;
}

.my-list li : nth-Child (2) {
  애니메이션-지연 : 200ms;
}

.my-list li : nth-Child (3) {
  애니메이션 지연 : 300ms;
}

/* 등*/

이 기술은 특히 주어진 시간에 목록에 얼마나 많은 항목이 있는지 아는 경우 특히 스 태거 항목을 잘 수행합니다. 그러나이 접근법은 항목 수를 예측할 수 없을 때 실패합니다 (대시 보드를 위해 제작 한 위젯의 경우). 목록의 항목 수가 변경 될 때 마다이 코드로 돌아가고 싶지 않으므로 각 항목이 증가함에 따라 최대 50 개의 항목을 처리하고 애니메이션 대기 시간을 추가 할 수있는 빠른 SASS 루프를 작성했습니다.

 .my-list {
  Li {
    애니메이션 : My-Animation 300ms 편의성;

    @for $ i부터 1 ~ 50 {
      & : nth-Child (#{$ i}) {
        애니메이션-지연 : 100ms * $ i;
      }
    }
  }
}

이것은 문제를 해결해야합니다! 그러나 너무 서투른 느낌이 듭니다. 물론 파일에 너무 많은 무게가 추가되지는 않지만 컴파일 된 CSS에는 nth-child(45) 와 같은 많은 미사용 선택기가 포함되어 있음을 알고 있습니다.

더 나은 방법이 있어야합니다. 일반적으로 나는 모든 프로젝트를 찾고 지연을 추가하기 위해 JavaScript로 돌아갈 것입니다. 그러나 이번에는 CSS와 혼자 할 수 있는지 탐색하는 데 시간을 보냈습니다.

CSS 카운터는 어떻습니까?

가장 먼저 떠오르는 것은 calc() 함수와 함께 CSS 카운터를 사용하는 것입니다.

 .my-list {
  카운터 리셋 : 내 카운터;
}

.my-list li {
  카운터 증가 : 내 카운터;
  애니메이션 델리 : Calc (Counter (My-Counter) * 100ms);
}

불행히도, 사양은 calc() 에서 카운터를 사용할 수 없다고 명시하기 때문에 이것은 작동하지 않습니다.

calc() 표현식의 구성 요소는 문자 그럴 값 또는 attr() 또는 calc() 표현 일 수 있습니다.

일부 사람들은이 아이디어를 좋아하지만 아직 초안 단계에서 벗어난 것은 아닙니다.

데이터 속성은 어떻습니까?

사양에서 발췌문을 읽은 후 calc() attr() 사용할 수 있다는 것을 알게되었습니다. 그리고 CSS 값 및 단위 사양에 따라 :

CSS3에서 attr() 표현식은 여러 가지 다른 유형의 값을 반환 할 수 있습니다.

이것은 나를 상기시켜줍니다. 데이터 속성이 문제를 해결할 수 있습니다.

• 항목 1
• 항목 2
• 항목 3
• 항목 4

.my-list li {
  애니메이션 델리 : calc (attr (data-count) * 150ms);
}

그러나이 브라우저 지원이 매우 나쁘기 때문에 저의 희망은 무너졌습니다!

이 브라우저는 Caniuse의 데이터를 지원하며 자세한 내용이 포함되어 있습니다. 이 숫자는 브라우저 가이 버전 에서이 기능을 지원하고 나중에이 기능을 지원한다는 것을 나타냅니다.

데스크탑

모바일/태블릿 PC

그래서 드로잉 보드로 돌아갑니다.

맞춤 속성은 어떻습니까?

다음 아이디어는 CSS를 사용하여 속성을 사용자 정의하는 것입니다. 예쁘지는 않지만 작동합니까?

그것은 또한 유연하다는 것이 밝혀졌습니다. 예를 들어, 애니메이션을 바꿀 수 있습니다.

또한 완전히 무작위 적이고 애니메이션 요소를 동시에 수행 할 수 있습니다.

우리는 심지어 한 걸음 더 나아가서 대각선 스윙을 할 수 있습니다.

브라우저 지원은 그렇게 나쁘지 않습니다 ( 팝업 인터넷 익스플로러 ).

이 브라우저는 Caniuse의 데이터를 지원하며 자세한 내용이 포함되어 있습니다. 이 숫자는 브라우저 가이 버전 에서이 기능을 지원하고 나중에이 기능을 지원한다는 것을 나타냅니다.

데스크탑

모바일/태블릿 PC

CSS의 가장 큰 특징은 계단식 덕분에 이해하지 못하는 것들을 무시한다는 것입니다. 이것은 모든 것이 함께보기에 애니메이션 될 것임을 의미합니다. 이것이 스타일이 아닌 경우 기능 쿼리를 추가하여 기본 애니메이션을 무시할 수 있습니다.

 .my-list li {
  애니메이션 : 폴백-애니메이션;
}

@Supports (variable) {
  .my-list li {
    애니메이션 : 멋진 애니메이션;
    애니메이션 델리 : calc (var (-animation-order) * 100ms);
  }
}

기본 CSS LON LIVE

자바 스크립트가 필요한지 스스로에게 더 많이 멈출수록 CSS 자체가 무엇을 할 수 있는지에 대해 더 놀랐습니다. 물론 CSS 카운터를 calc() 함수에서 사용할 수 있다면 매우 우아한 솔루션입니다. 그러나 현재 인라인 사용자 정의 속성은이 문제를 해결하는 강력하고 유연한 방법을 제공합니다.

위 내용은 비틀 거리는 애니메이션을 만들기위한 다양한 접근법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!