CSS 전환 생성기

CSS Transition Generator 는 CSS transition 속성에 대한 시각적 편집기입니다. 어떤 속성을 애니메이션으로 지정하고,지속 시간을 설정하고,타이밍 함수를 선택하고,지연을 추가한 다음,실시간 미리보기를 트리거하여 선언문을 복사하기 전에 정확한 완화 기능을 볼 수 있습니다. 여러 트랜지션을 하나의 약어로 레이어할 수 있습니다. 예를 들어 변환을 이동하는 동안 불투명도가 희미해지는 경우 - 각 레이어는 고유한 속성,지속 시간,타이밍 및 지연을 얻습니다.

전환은 브라우저에게 즉시 전환하지 않고 속성의 두 값 사이의 변경 사항을 애니메이션화하도록 지시합니다. 전환 없이 호버에서 배경색을 변경하면 스냅됩니다; 전환 추가: 배경색 200ms가 쉽고 동일한 변경이 5분의 1초 이상 완화됩니다. 전환은 호버 상태가 아닌 기본 상태에 있으므로 요소는 변경 안팎으로 애니메이션을 적용하므로 돌아오는 길에 상호 작용이 갑작스럽지 않고 완료된 것처럼 느껴집니다.

모든 것은 브라우저에서 발생합니다. 페이드,버튼 호버 또는 바운스 같은 사전 설정에서 시작하여 슬라이더 및 선택을 조정하고 미리보기 트리거를 눌러 동작을 확인하고 속기를 복사합니다. 이 도구는 사양이 요구하는 순서대로 네 부분을 작성합니다. 속성,기간, 타이밍 기능,지연 - 그리고 지연이 0 일 때 생략합니다. 계정도 없고 업로드도 없으며 페이지가 로드되면 오프라인으로 계속 작동합니다.

가장 흔한 실수는 중간값이 없는 속성을 전환하려고 하는 것입니다. display: none to display: block cannot animate,왜냐하면 display 는 animatable 속성이 아니기 때문입니다 - none 과 block 사이에는 중간이 없습니다 - 이것이 바로 display 에 내장된 페이드인이 혼자 점프하는 이유입니다. 수정 사항은 불투명도와 가시성을 함께 전환하거나,더 새로운 허용-이산 동작을 사용하는 것입니다. 또한 너비,높이, 위쪽 또는 왼쪽보다 우선적으로 변환과 불투명도를 애니메이션화하는 것이 좋습니다: 처음 두 개는 GPU 에서 합성되고 레이아웃을 트리거하지 않으므로 매끄럽게 유지되는 반면 레이아웃 속성을 애니메이션화하는 것은 모든 프레임에서 페이지를 다시 계산하고 버벅거리고 말더듬이 전환의 일반적인 소스입니다.