저렴하게 느껴지는 인터페이스와 고려되는 느낌의 인터페이스 사이의 차이는 일반적으로 5분의 1초입니다. 포인터가 닿는 순간 갑자기 나타나는 호버 색상에 스냅되는 버튼; 200밀리초에 걸쳐 해당 색상으로 쉽게 이동하는 동일한 버튼은 완료된 것으로 읽습니다. 이러한 완화는 CSS 전환이며, 너무 작은 것에 대해 얼마나 자주 잘못되었는지, 기본 상태 대신 호버 상태를 적용했는지, 12번의 새로 고침에 걸쳐 시행착오를 거쳐 조정되었는지, 또는 전혀 애니메이션할 수 없는 속성에 적용되는지를 볼 수 있다는 점은 놀랍습니다.
전환은 즉시 전환하기보다는 시간이 지남에 따라 속성의 두 값 사이의 변화를 애니메이션화하는 browser's 방법입니다. 호버 효과,포커스 상태,확장 패널 및 토글 클래스 뒤에있는 주력이며 거의 항상 누구나 프로젝트에 추가하는 첫 번째 모션 비트입니다. 그러나 속기는 4 개의 값을 고정 된 순서로 한 줄에 벼락치기로 벼랑 끝으로 모션이 어떻게 느껴지는지를 결정하는 부분이며 잘 알려진 절벽 사람들이 무언가를 페이드 인하려고 할 때 떨어집니다 display: none. 재생을 볼 수 있는 전환을 구축하면 모든 것이 저장됩니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 CSS 전환 생성기 속성을 선택하고 지속 시간과 지연을 밀리초 단위로 설정하고 CSS 키워드와 큐레이팅된 큐빅 베지어 곡선 세트에서 타이밍 기능을 선택할 수 있습니다. 여러 전환을 하나의 약어로 스택할 수 있으며 트리거 버튼은 라이브 미리보기 요소에서 모션을 재생하므로 커밋하기 전에 완화 효과를 느낄 수 있습니다. 정확한 선언은 아래의 복사 준비 상자에 있습니다.
TL;DR: CSS 전환은 설정된 지속 시간 동안 속성의 두 값 사이의 변화를 애니메이션화합니다. 호버 상태가 아닌 기본 상태에 속하므로 요소가 양방향으로 완화됩니다. 속기 순서는 속성,지속 시간,타이밍-함수,지연으로 전환할 수 없습니다
display중간값이 없기 때문에 애니메이션을 선호해야 합니다transform그리고opacity원활한 성능을 위해. 이 생성기는 라이브 호버 미리보기로 모든 부분을 노출하고 여러 레이어를 지원하며 깨끗한 CSS 를 방출합니다. 가입하지 않고 브라우저에서 완전히 실행됩니다.
CSS 전환 생성기는 어떤 문제를 해결합니까?
전환의 어려운 부분은 구문이 아닙니다; 그것은 당신이 그것을 읽음으로써 움직임을 판단할 수 없다는 것입니다. transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 특정한 튀는 용이함을 설명하지만,그 튀는 것이 버튼에 맞는 느낌인지 알 수 있는 유일한 방법은 그것이 일어나는 것을 지켜보는 것입니다. 그리고 자신의 프로젝트에서 그것이 일어나는 것을 지켜본다는 것은 규칙을 작성하고,호버 상태를 설정하고,저장하고, 요소 위로 마우스를 이동한 다음,하나의 숫자를 조정하고 모든 것을 다시 수행하는 것입니다. 그 루프는 대부분의 사람들이 가장 기분이 좋은 것보다 가장 먼저 작동하는 것에 만족할 만큼 충분히 느립니다.
생성기는 그 루프를 한 번의 클릭으로 바꿉니다. 지속 시간을 설정하고 트리거를 누르면 미리보기 요소가 앞에서 전환을 재생합니다. 타이밍 기능을 변경하고 다시 누르면 선형 슬라이드와 용이성 정착의 차이를 즉시 느낄 수 있습니다. 몇 라운드 후에 도움이되는 모션과 방해가되는 모션을 분리하는 직관 인 5 백에 비해 2 백 밀리 초가 어떤 느낌인지에 대한 감각을 개발합니다. 만족하면 작업 CSS 가 이미 작성되었으므로 복사 할 것이 없습니다.
여기에는 모든 시각적 CSS 빌더와 동일한 신뢰성 주장이 적용됩니다: 잘못된 형식을 생성할 수 없습니다 transition 슬라이더를 드래그하고 메뉴에서 선택하여 값을 계산하므로 출력은 항상 붙여넣기에 안전합니다. 이것이 바로 제가 이런 종류의 도구를 가까이 두는 이유입니다. 도달 뒤에 있는 동일한 본능입니다 CSS 변환 생성기 머릿속으로 도수를 세는 것보다 변환이 필요할 때.
전환은 기본 상태 또는 호버 상태에서 어디로 이동합니까?
이것은 내가 가장 많이 보는 실수이며,수정이 너무 간단하기 때문에 분명히 말할 가치가 있습니다. 전환은 element's 기본 상태에 속하며,그것에 속하지 않습니다 :hover 규칙. 전환이 기본 상태에서 선언되면 브라우저는 속성을 양방향으로 애니메이션화합니다: 포인터가 도착하면 호버 변경으로 쉽게 전환되고 포인터가 떠날 때 다시 완화됩니다. 그 대칭은 상호 작용이 완전하다고 느끼게하는 것입니다.
전환만 켜세요 :hover 그리고 한쪽으로 치우친 효과를 얻습니다. 속성은 들어오는 도중에 부드럽게 애니메이션 됩니다. 요소가 호버링되는 동안 전환이 존재하지만 포인터가 떠나는 순간, :hover 규칙은 더 이상 적용되지 않고,전환은 함께 진행되며,속성은 즉시 뒤로 스냅됩니다. 결과는 우아하게 위로 편해지는 버튼이며,그 다음 다시 아래로 딸깍 소리를 내며,이는 전혀 애니메이션이 없는 것보다 더 나빠 보입니다. generator's 출력은 기본 상태로 가기 위해 작성되고,안내는 정확히 이러한 이유로 도구에 구워집니다. 요소 자체에 한 번 선언하고 상태 변경이 트리거하도록 합니다.
전환 속기의 올바른 순서는 무엇입니까?
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 transition 속기는 한 줄에 최대 4 개의 값을 포장하며,순서는 사양에 의해 고정됩니다: 속성,기간, 타이밍-함수,지연. 그래서 transition: opacity 300ms ease-in-out 100ms 는 불투명도 속성을 의미하며, 백 밀리초 지연 후 용이성 커브를 사용하여 삼백 밀리초 이상 애니메이션됩니다. 순서를 잘못 가져오면 브라우저가 선언을 무시하거나 의도하지 않은 것으로 읽습니다.
사람을 잡아내는 한 가지 규칙은 두 가지 시간 값입니다. 지속 시간과 지연은 모두 시간이며 CSS 는 순전히 위치에 따라 구분합니다: 첫 번째 시간 값은 항상 지속 시간이고 두 번째는 항상 지연입니다. 한 시간 값만 쓰면 지속 시간으로 읽혀지고 지연은 기본값인 0 으로 유지됩니다. 너무 일찍 시작하는 것처럼 보이는 전환이 실수로 먼저 작성된 지연의 경우인 경우가 종종 있는 이유입니다. 생성기는 올바른 순서로 속기를 구축하여 전체 문제를 회피하고,0 일 때 지연을 완전히 생략하므로 후행은 절대 발송하지 않습니다 0ms 그건 아무것도 안 돼요 여기 표에 있는 해부학이 있습니다.
| 부분 | 예 | 그것이 통제하는 것 |
|---|---|---|
| 재산 | opacity |
어떤 속성이 애니메이션을 적용하는지, 또는 all 애니메이션 가능한 모든 것 |
| 기간 | 300ms |
애니메이션의 소요시간; 첫 번째 시간 값 |
| 타이밍 기능 | ease-in-out |
운동의 가속도 곡선 |
| 지연 | 100ms |
시작하기 전에 얼마나 기다려야 합니까; 두 번째 시간 값 |
내 디스플레이: 없음 전환이 애니메이션되지 않는 이유는 무엇입니까?
이것은 절벽이고,거의 모든 사람들이 적어도 한 번은 그 절벽에서 걸어 나갑니다. 여러분은 요소가 페이드 인되기를 원하므로 전환합니다 display 부터 none 에 block 및 설정 opacity를,그리고 요소는 페이드 없이 그냥 나타납니다. 그 이유는 근본적입니다: display 는 애니메이팅 가능한 속성이 아닙니다. 중간 지점이 없습니다 none 그리고 block,브라우저가 50 퍼센트 표시에서 보간할 수 있는 값이 없으므로,트윈할 것이 없습니다. 변경은 즉시 발생하며,위쪽에 레이어드한 불투명 애니메이션은 요소가 처음부터 렌더링되지 않았기 때문에 잘립니다.
고전적인 수정은 애니메이션하는 것입니다 opacity 그리고 visibility 함께 떠나세요 display 그것에서. visibility 전환할 수 있는 이유는 이산 속성이기도 하지만 지속 시간과 페어링하면 나가는 길에 불투명도가 사라질 때까지 브라우저가 요소를 볼 수 있도록 유지할 수 있기 때문입니다. 최신 수정 사항은 다음과 같습니다 transition-behavior: allow-discrete와 같은 개별 속성을 애니메이션화할 수 있는 새로운 기능입니다 display 전환의 끝점에서 진정으로 페이드 인할 수 있습니다 display: none 그것을 지원하는 브라우저에서. 어느 쪽이든,교훈은 동일합니다: 당신이 전환하고있는 속성이 왜 아무것도 움직이지 않는지 궁금해하기 전에 중간 값을 가지고 있는지 확인하십시오. 이것은 라이브 미리보기가 몇 초 만에 표면화되는 일종의 gotcha 이며,이는 당신이 그것을 볼 수있는 모션을 구축하기위한 논쟁의 큰 부분입니다.
타이밍 기능이란 무엇이며, 왜 그렇게 중요한가요?
타이밍 함수는 동작의 느낌을 결정하는 전환의 일부이며 지속 시간보다 훨씬 더 많은 작업을 수행합니다. 같은 길이의 두 전환은 곡선에 따라 완전히 다르게 느껴질 수 있습니다. A linear 트랜지션은 일정한 속도로 움직이며 기계 부품처럼 기계적인 느낌을 줍니다. An ease-out 전환은 빠르게 시작되고 도착하면서 느려지는데, 이는 물리적 객체가 감속하는 방식을 모방하기 때문에 자연스럽게 느껴지며 대부분의 인터페이스 모션에 적합한 기본값입니다. ease-in 반대의 일을 하며 화면을 떠나는 일에 가장 적합합니다.
그 밑에는 이 모든 것들이 입방-베지어 곡선입니다. 키워드들은 ease, ease-in, ease-out 그리고 ease-in-out 특정에 대한 친근한 이름일 뿐입니다 cubic-bezier(x1, y1, x2, y2) 값,두 개의 제어점이 가속도를 형성하는 곳. 입방 베지에를 강력하게 만드는 것은 a 를 가진 제어점입니다 y 1 이상 또는 0 이하의 값은 애니메이션을 끝점을 지나 뒤로 밀어 오버슈트 또는 바운스를 만드는 방법입니다. 생성기에는 깔끔한 인터페이스 모션을 위한 재질 표준 곡선과 탄력 있고 유쾌한 느낌을 위해 오버슈트하는 뒤로 곡선이 포함되어 있습니다 steps() 스프라이트나 똑딱거리는 카운터에 애니메이션을 적용하는 방식인 글라이딩이 아닌 개별 프레임에서 점프하는 모션에 대한 기능입니다. 커브를 선택하고 트리거를 누르는 것이 각자가 수행하는 작업에 대한 느낌을 구축하는 가장 빠른 방법입니다.
언제 여러 개의 transition layer 를 사용해야 하나요?
하나의 전환은 하나의 속성에 애니메이션을 적용하지만 실제 상호 작용은 종종 한 번에 여러 가지를 변경합니다. 호버에서 들어 올리는 버튼은 배경색을 이동하고 변환을 넛지하며 그림자를 깊게 할 수 있으며 각 버튼은 자체 타이밍을 원할 수 있습니다 transition 속성은 쉼표로 구분된 목록으로 이를 처리합니다. 여기서 각 항목은 자체 속성, 기간, 타이밍 함수 및 지연을 사용하여 완전히 전환됩니다.
생성기는 이것을 직접 지원합니다: 각 속성에 대한 레이어를 추가하고, 각각 독립적으로 조정하고, 도구는 이를 하나의 속기로 결합합니다 transition: background-color 200ms ease, transform 200ms ease-out. 속성을 사용하는 대신 별도의 전환을 제공하는 이유 all 는 통제와 성능이다. transition: all 편리하지만 의도하지 않은 속성을 포함하여 변경되는 모든 속성에 애니메이션을 적용하고 브라우저가 변경 사항을 모두 확인하도록 강제합니다. 특정 속성의 이름을 지정하는 것이 더 예측 가능하고 저렴합니다. 도구의 느린 공개 사전 설정은 2 계층 전환을 보여 주며 불투명도가 희미 해지고 공유 지연과 함께 변환을 이동하며 이는 쉽게 볼 수있는 요소의 표준 레시피입니다. 해당 페어링의 변환 측면이 튜닝하는 것이라면, CSS 변환 생성기 는 동반도구이며, 이 둘은 거의 항상 함께 사용된다.
부드러운 성능을 위해 어떤 속성을 애니메이션화해야 합니까?
모든 속성이 똑같이 애니메이션에 저렴하지는 않으며 선택은 전환이 1 초에 매끄러운 60 프레임에서 실행되는지 아니면 더듬 거리는지에 직접적인 영향을 미칩니다. 선호 할 두 가지 속성은 transform 그리고 opacity. 둘 다 GPU 에 건네주고 페이지 레이아웃을 다시 계산하지 않고도 합성할 수 있으므로,소박한 하드웨어에서도 애니메이션이 부드럽게 유지됩니다. 이것이 바로 와 함께 슬라이드되는 카드인 이유입니다 transform: translateX 같은 카드로 애니메이션을 적용한 동안 버터 같은 느낌이 듭니다 left 거친 느낌.
애니메이션을 방지할 속성은 레이아웃을 트리거하는 속성입니다: width, height, top, left, margin 그리고 padding. 이들 중 하나를 변경하면 브라우저가 애니메이션의 모든 단일 프레임에서 요소의 위치와 크기 및 그에 의해 영향을 받는 모든 것을 다시 계산하게 되는데,이는 비용이 많이 들고 janky 모션의 가장 일반적인 폭을 애니메이션화하고 싶은 경우 일반적으로 a 여부를 물어볼 가치가 있습니다 transform: scaleX 비슷한 효과를 더 저렴하게 생성할 것입니다. 생성기를 사용하면 어떤 속성이든 선택할 수 있으므로 차단되지 않지만 목록에 있는 속성은 그대로 유지됩니다 transform 그리고 opacity 그것들이 당신이 먼저 도달해야 하는 것들이기 때문에 정상 부근에 있습니다. 이와 같이 고려된 도구 세트를 구축하기 위한 더 넓은 경우는 다음과 같습니다 웹 개발자 툴킷 piece와 그 뒤에 있는 워크플로 습관은 다음과 같습니다 개발자 생산성 도구 가이드.
생성기는 어떻게 미리보기를 정직하게 유지합니까?
모든 시각적 빌더는 동일한 위험에 직면합니다: 도구가 재생산되지 않는 값을 가르칠 때까지 미리보기와 내보낸 코드가 떨어져 표류합니다. 이 생성기는 정확한 값을 적용합니다 transition value it 은 미리보기 요소에 출력하고 실제 상태 변경으로 트리거하므로 표시되는 모션은 복사된 CSS 가 생성할 모션입니다. 동의하지 않을 수 있는 별도의 애니메이션 경로는 없습니다.
전환은 속성이 변경될 때만 실행되기 때문에,미리보기는 사이를 전환할 상태가 필요하며,이것이 트리거 버튼이 하는 일입니다: 그것은 두 값 세트 사이에서 요소를 뒤집어서 전환이 작동하고 여러분이 그것을 볼 수 있도록 합니다. 이것은 전환이 야생에서 어떻게 작동하는지,호버, 포커스 또는 토글된 클래스가 그것을 설정하는 것을 반영합니다. 출력도 최소로 유지되어 0 일 때 지연을 삭제하고 추가한 레이어만 나열합니다. 이는 단지 의미 있는 선언만 내보내는 동일한 분야입니다. 를 통해 실행됩니다 그라디언트 생성기 그리고 the 박스-섀도 생성기.
CSS 전환을 지원하는 브라우저는 무엇입니까?
CSS 전환은 현재의 모든 브라우저에서 지원되며 10 년 이상 지속되어 왔습니다. The transition 프로퍼티와 모든 롱핸드는 범용이며 접두사가 붙지 않으므로 이 생성기의 출력은 공급업체 접두사나 대체 없이 Chrome,Firefox, Safari 및 Edge 에서 작동합니다. 최신 transition-behavior: allow-discrete 다음과 같은 개별 속성을 애니메이션화하는 기능 display 는 더 최근의 것이고 더 좁은 지원을 가지고 있으므로 그 특정 기술을 점진적인 향상으로 취급하고 불투명도 - 가시성 페어링 을 대체 요소로 유지하십시오. 권위있는 규칙의 경우 W3C 의 CSS 전환 모듈 레벨 1 사양이 기본 소스이며 생성기가 조각이 어떻게 맞는지에 대한 느낌을 주면 읽을 가치가 있습니다.
더 넓은 시각적 CSS 도구 세트를 조립하는 경우 변환 생성기와 CSS 필터 생성기 전환은 변환을 부드럽게 하고 변환으로 빌드하는 필터이기 때문에 자연스럽게 이 변환과 페어링합니다. 여기 있는 모든 것은 클라이언트 측에서 실행되며 복사하는 CSS는 런타임, 빌드 단계 및 종속성 없이 사용할 수 있습니다.
자주 묻는 질문
CSS 전환 생성기 란 무엇입니까?
CSS 전환 생성기는 선택한 설정에서 CSS 전환을 구축하는 시각적 도구입니다. 속성,기간, 타이밍 기능 및 지연을 선택하고,이완을 보기 위해 트리거할 수 있는 라이브 미리보기로 전환 속기를 출력합니다.
기본 상태 또는 호버 상태에서 전환을 어디에 두나요?
기본 상태에 놓습니다. 기본 규칙에 선언된 전환은 속성을 양방향으로,호버 변경으로 다시 애니메이션화합니다. 호버에만 선언하면 변경이 애니메이션되지만 포인터가 떠날 때 즉시 다시 스냅됩니다.
전환 속기의 순서는 무엇입니까?
순서는 재산, 내구, 타이밍-기능, 지연, 예를 들면 전환입니다: 불투명도 300ms ease-in-out 100ms. 첫번째 시간 가치는 항상 내구이고 두번째는 항상 지연입니다, 그래서 단 하나 시간 가치는 내구로 읽힙니다.
왜 내 디스플레이: 표시할 없음: 블록 전환이 애니메이션되지 않습니까?
디스플레이는 애니메이터블 속성이 아니기 때문입니다. none 과 block 사이에는 중간값이 없으므로 브라우저는 tween 할 것이 없습니다. 대신 Transition opacity 와 visibility 를 함께 사용하거나 transition-behavior: allow-discrete in newer browsers to fade in from display: none 을 사용합니다.
한 번에 두 개 이상의 속성을 전환할 수 있나요?
예. 각 전환을 쉼표로 구분합니다. 예를 들어 전환: 불투명도 300ms 용이성,변환 200ms 용이성. 이 생성기는 레이어를 추가할 때 해당 목록을 작성하여 각 속성에 고유한 지속 시간,타이밍 기능 및 지연을 제공합니다.
입방 베지어 타이밍 함수란 무엇입니까?
3 차 베지어 타이밍 함수는 2 개의 제어점,쓰기된 3 차 베지어 (x1,y1, x2,y2) 로부터 사용자 지정 가속 곡선을 정의합니다. 키워드 easy,easie-in,easie-out 및 easy-in-out 은 특정 곡선의 바로 가기이며,1 이상 또는 0 이하의 제어점은 오버슈트를 생성하며,이는 바운스가 구축되는 방식입니다.
부드러운 성능을 위해 어떤 속성을 애니메이션화해야 합니까?
변환 및 불투명도를 선호합니다. GPU 에서 합성되며 레이아웃을 트리거하지 않으므로 60fps 로 애니메이션을 적용합니다. 너비,높이, 상단,왼쪽 또는 여백 애니메이션을 사용하면 브라우저가 모든 프레임에서 레이아웃을 다시 계산하게 되며 이는 말더듬 전환의 가장 일반적인 원인입니다.
생성된 전환 CSS는 무료이며 안전하게 사용할 수 있습니까?
예. 이 도구는 가입이나 사용 제한이없는 완전 무료이며 모든 최신 브라우저에서 지원되는 표준의 접두사가없는 CSS 를 방출합니다. 모든 처리는 브라우저에서 이루어 지므로 아무 것도 업로드되지 않으며 도구는로드 된 후 오프라인으로 작동합니다.
