사용자 정의 속성을 사용하여 키 프레임 애니메이션의 변형을 wnang습니다

CSS 사용자 정의 속성을 사용하여 전처리기가 필요하지 않고 KeyFrame 애니메이션의 변형을 유연하게 제어하십시오! 이 기사는 CSS 및 사용자 정의 속성을 사용하여 KeyFrame 애니메이션의 사용자 정의 구현 만 사용하는 방법을 살펴보고 Mixins와 같은 전처리기를 사용하여 가져 오는 추가 종속성을 피할 것입니다.

전처리 서에 의존하지 않고 CSS 애니메이션 키 프레임을 사용자 정의하는 방법이 궁금한 적이 있습니까? 나는 종종 이것을 위해 사전 처리기로 돌아 가지만,이 의존성을 제거 할 수 있다면 기본 CSS를 사용하는 것이 더 낫지 않습니까?

CSS 사용자 정의 속성 덕분에 CSS만으로 키 프레임 애니메이션 변형의 컨트롤을 달성 할 수 있습니다! CSS 키 프레임의 작동 방식과 CSS 및 사용자 정의 속성을 활용하여이를 향상시키는 방법을 파헤 봅시다.

CSS 애니메이션 상속 메커니즘

요소에 애니메이션을 적용하면 시간, 지연 등과 같은 일부 속성을 사용자 정의 할 수 있습니다. 간단한 예를 살펴 보겠습니다. 두 가지 클래스. 워크와 .run이 있습니다.이 두 가지는 동일한 애니메이션 (호흡 명명)을 사용하지만 .Run의 애니메이션 실행 속도는 각각 .Walk (0.5S 및 2)보다 빠릅니다.

 <code>@keyframes breath { from { transform: scale(0.5); } to { transform: scale(1.5); } } /* 两者共享相同的动画，但行走比奔跑慢*/ .walk { animation: breath 2s alternate; } .run { animation: breath 0.5s alternate; }</code>

애니메이션이 재사용 될 때마다 동작은 우리가 할당 속성에 따라 다릅니다 . 따라서 애니메이션의 동작은 적용되는 요소에서 상속된다고 말할 수 있습니다.

그러나 애니메이션 규칙 (이 예에서 스케일링 비율)을 어떻게 처리해야합니까? 호흡 애니메이션의 예로 돌아갑니다 : .Walk 클래스는 호흡 애니메이션을 천천히 수행하지만 더 큰 스케일링 비율이 필요하므로 스케일링 값을 .Run 클래스보다 크게 설정해야하며 .Run 클래스는 더 작고 자주 스케일링 변경을 채택해야합니다.

순수한 CSS에서는 원래 애니메이션을 복사 한 다음 클래스에서 직접 값을 조정하는 것이 일반적입니다.

 <code>@keyframes breath { /* 与之前相同... */ } /* 与breath类似，但缩放比例不同*/ @keyframes breathDeep { from { transform: scale(0.3); } to { transform: scale(1.7); } } .walk { animation: breathDeep 2s alternate; } .run { animation: breath 0.5s alternate; }</code>

이 접근법이 작동하는 동안 더 나은 솔루션은 애니메이션의 속성과 값을 동시에 재사용하는 것입니다! 어떻게해야합니까? CSS 변수의 상속 메커니즘을 사용하십시오! 구현 방법을 살펴 보겠습니다.

 <code>/* breath动画的行为基于继承的CSS变量值*/ @keyframes breath { from { transform: scale(var(--scaleStart)); } to { transform: scale(var(--scaleEnd)); } } .walk { --scaleStart: 0.3; --scaleEnd: 1.7; animation: breath 2s alternate; } .run { --scaleStart: 0.8; --scaleEnd: 1.2; animation: breath 0.5s alternate; }</code>

시원하지 않습니까? 이제 반복 애니메이션을 쓰지 않고도 동일한 애니메이션과 다른 효과를 얻을 수 있습니다!

한 걸음 더 나아가 야하는 경우, 루트 변수뿐만 아니라 특정 요소의 변수를 업데이트하는 JavaScript를 사용하여 CSS 사용자 정의 속성을 업데이트 할 수도 있습니다. CSS 애니메이션에 대한 기본 최적화를 잃지 않고 JavaScript로보다 효율적인 애니메이션을 만들 수 있기 때문에 이것이 매우 강력합니다. 이것은 상생 상황입니다!

위 내용은 사용자 정의 속성을 사용하여 키 프레임 애니메이션의 변형을 wnang습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!