따라서 디스플레이 속성을 애니메이션하고 싶습니다

속성을 ​​애니메이션 : acss 혁명?

CSS 실무 그룹은 최근 display 속성의 애니메이션과 전환을 허용하는 제안서를 승인했습니다. 이것은 예를 들어,

와

. display display: block 이것은 독특한 도전을 제시합니다. 현재 display: none를 설정하면 갑자기 실행되는 애니메이션이 중지됩니다. 다시 추가하면 다시 시작합니다. 사양은 다음을 명확하게합니다.

에서 다른 값으로 변경하면 다시 시작합니다 이 역설적 인 행동은 처음에 제안을 제안 할 수 없다고 제안했다. 그러나 핵심은

가 이외의 디스플레이 값

의 우선 순위를 지정한다는 것입니다. 이렇게하면

가 완전히 완료 될 때까지 애니메이션을 방해하거나 다시 시작하는 것을 방지합니다. Miriam의 설명 (이것을 "Toots"라고 부르겠습니다. 우리가 우리가 할 것인가?)은 프로세스를 명확히합니다. 그것은 display: none와 display: none 사이의 보간에 관한 것이 아니라, 애니메이션이 결론을 내릴 때까지 display가 안전하게 발효 될 때까지 none를 활성 상태로 유지하도록 허용합니다. 애니메이션은 이산적입니다. 우리는 가 끝난 후 상태

사이를 전환하고 있습니다. 애니메이션이 마무리됩니다 Robert Flack의 예는 이것을 보여줍니다

초기 프레임은 @keyframes를 우선시하고, 를 재정의하고, 가 발효되기 전에 애니메이션이 완료되도록합니다. Miriam의 Mastodon 예제는 전환을 사용합니다 none 여기, none가 처음에 설정되어 문서 흐름에서 요소를 제거합니다. 호버에서 값이 우선 순위가 지정되어 불투명도 전환이 완료된 후 전환이 가능합니다. 이것은 상당한 발전이지만, 많은 것을 다루어야합니다. 여러 애니메이션, 무한 애니메이션, 반전 애니메이션 등과의 상호 작용에는 추가 고려가 필요합니다. 그럼에도 불구하고, 이것은 획기적인 발전입니다!

위 내용은 따라서 디스플레이 속성을 애니메이션하고 싶습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!