모든 개발자는 블록을 복사했습니다 @keyframes 스택 오버플로 답변에서 붙여넣고 새로 고친 후 요소가 완벽하게 정지해 있는 것을 발견했습니다. 10번 중 9번은 지루한 이유입니다: 애니메이션 이름입니다 @keyframes 규칙은 의 이름과 일치하지 않았습니다 animation 속기,또는 지속 시간이 0 으로 남겨 졌거나 클래스가 요소에 착륙하지 않았습니다. 다른 이유는 키 프레임 애니메이션이 코드를 읽음으로써 결과를 판단 할 수없는 CSS 의 모서리 중 하나이기 때문입니다. 일련의 백분율과 변환은 동작이 실행되는 것을 볼 때까지 모션이 매끄럽고 빠르거나 뱃멀미로 느껴지는지에 대해 아무 것도 알려주지 않습니다.
CSS 애니메이션은 시간이 지남에 따라 명명된 스타일 시퀀스를 통해 요소를 이동하기 위한 browser's 메커니즘입니다. 단일 변경 사항을 애니메이션화하고 트리거를 기다리는 전환과 달리 애니메이션은 a를 따릅니다 @keyframes 원하는 만큼 많은 단계를 가진 스크립트는 영원히 반복할 수 있으며,적용되는 순간 저절로 시작됩니다. 인터페이스가 살아있음을 느끼게 하는 로딩 스피너,주의 펄스,입구 효과 및 모든 주변 동작 비트에 동력을 공급하는 것입니다. 하지만 두 반쪽인 키프레임과 약어는 정확히 일치해야 하며 약어는 대부분의 사람들이 결코 외우지 않는 순서로 7~8개의 값을 한 줄에 묶습니다.
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 애니메이션 생성기 추측을 제거합니다. 사전 설정 라이브러리에서 모션을 선택하고 지속 시간,완화, 지연,반복 횟수 및 방향을 조정하고 라이브 미리보기 요소에서 재생되는 것을 봅니다. 이 도구는 두 가지를 모두 씁니다 @keyframes 규칙과 일치 animation 이름이 이미 동기화되어 있는 복사 준비 상자에 약칭으로 입력하므로 붙여넣는 블록이 처음으로 작동합니다.
TL;DR: CSS 애니메이션은 요소를 a를 통해 이동합니다
@keyframes시간이 지남에 따라 시퀀스를 수행하고 전환과 달리 트리거가 필요하지 않으며 루프를 만들 수 있습니다. 그만큼@keyframes이름과animation-name정확히 일치해야 하며,이는 애니메이션이 아무 것도 하지 않는 가장 일반적인 단일 이유입니다. 속기는 이름,기간, 타이밍-함수,지연, 반복-수,방향 및 채우기-모드를 전달합니다. 애니메이션 선호transform그리고opacity부드럽고 합성된 모션을 위해. 이 생성기는 14 개의 사전 설정,전체 재생 제어 및 라이브 미리보기를 제공하며 키프레임과 약칭을 모두 함께 방출합니다. 가입 없이 브라우저에서 완전히 실행됩니다.
CSS 애니메이션 생성기는 어떤 문제를 해결합니까?
키프레임 애니메이션의 어색한 점은 왕복입니다. 손으로 바운스를 조정하려면 다음을 작성하세요 @keyframes 규칙, 작성 animation 줄을 서서 파일을 저장하고 브라우저로 전환하고 다시로드 할 때까지 기다린 다음 지켜보십시오. 바운스가 너무 공격적이면 하나를 변경하십시오 translateY 값을 매기고 전체 루프를 다시 수행하십시오. 그 사이클이 느리기 때문에 대부분의 사람들은 옳다고 느끼는 버전보다는 깨진 것처럼 보이지 않는 첫 번째 버전을 받아들이고 그 둘의 차이점은 바로 템플릿에서 고려 된 인터페이스를 분리하는 폴란드어입니다.
생성기가 해당 루프를 한 번의 클릭으로 축소합니다. 사전 설정을 선택하고 지속 시간 슬라이더를 드래그하면 미리보기 요소가 바로 앞에 있는 동작을 재생합니다. 타이밍 기능을 에서 전환합니다 ease 베지어 곡선으로 느낌의 변화는 즉각적입니다. 반복 횟수를 무한으로 설정하고 애니메이션 루프를 설정하여 연구할 수 있습니다. 이 중 몇 분 후에 1200에 대해 600밀리초가 어떻게 보이는지에 대한 직관을 구축합니다. 이는 다른 모든 곳에서 좋은 동작 결정을 내리는 데 필요한 감각입니다.
정확성 주장도 있습니다. 기형을 생성할 수는 없습니다 animation 메뉴에서 선택하고 슬라이더를 드래그하여 값을 지정하고 도구가 생성한 키프레임에 약칭을 바인딩하므로 키프레임 이름을 잘못 입력할 수 없습니다. 출력은 항상 붙여넣기에 안전합니다. 그 신뢰성은 내가 다른 속성에 대해 시각적 CSS 빌더를 닫고 다른 속성에 도달하는 것과 동일한 본능을 유지하는 것과 같은 이유입니다 그라디언트 생성기 내 머릿속의 색상 정지를 세는 대신 박스-섀도 생성기 흐림 반경으로 추측하는 대신.
CSS 애니메이션은 CSS 전환과 어떻게 다른가요?
이것은 사람들을 끊임없이 위로 이동시키므로 정확하게 말할 가치가 있습니다. 전환은 두 상태 사이의 단일 속성에 애니메이션을 적용하고 실행되기 전에 변경해야 할 사항,호버링, 초점,토글된 클래스를 요구합니다. 시작 값과 끝 값을 가지며 그 사이에는 아무것도 없습니다. 이와 대조적으로 애니메이션은 a 를 따릅니다 @keyframes 어떤 수의 중간 단계를 정의 할 수있는 규칙, 그래서 요소는 A에서 B로 직선이 아닌 전체 안무를 통해 이동할 수 있습니다 또한 아무것도 기다리지 않습니다: 적용하고 재생됩니다.
실질적인 결과는 상태 변화를 부드럽게 하고 싶을 때 전환에 도달하고,요소에 내재된 모션을 원할 때 애니메이션에 도달한다는 것입니다. 호버링 시 어두워지는 버튼은 전환입니다. 영원히 회전하는 스피너,눈을 그리기 위해 펄스하는 배지,또는 페이지가 로드될 때 미끄러지는 카드는 모두 애니메이션입니다. 모션이 저절로 발생하고 종종 반복되기 때문입니다. 주어진 효과가 필요한 것을 여전히 결정하고 있다면 경험 법칙은 간단합니다: 사용자 작업이 시작하고 한 방향으로 진행되면 전환을 사용하십시오; 자체적으로 재생되거나 루프가 발생하거나 두 단계 이상이면 애니메이션을 사용하십시오. 그만큼 CSS 전환 생성기 는 첫 번째 경우에 대한 동반 도구이며, 두 개는 당신이 이제까지 쓸 모션의 대부분을 커버합니다.
| 측면 | 전환 | 애니메이션 |
|---|---|---|
| 트리거 | 상태 변경(호버, 초점, 클래스)이 필요합니다 | 적용시 자체적으로 시작합니다 |
| 단계 | 둘, 시작과 끝 | 어떤 번호든, 통해 @keyframes |
| 루핑 | 아니요, 변경당 한 번 실행됩니다 | 응, 함께 iteration-count |
| 일반적인 사용 | 호버링 및 초점 효과 | 스피너, 펄스, 입구 |
애니메이션 속기의 올바른 순서는 무엇입니까?
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 animation 속기는 조밀합니다. 키프레임 이름,기간, 타이밍-함수,지연, 반복-계수,방향, 채우기-모드 및 재생-상태를 모두 한 줄에 전달할 수 있으며 순서는 전환에 대해 정확히 하는 방식으로 두 시간 값에 대해 중요합니다. 이 생성기는 예를 들어 이름을 먼저 쓴 다음 기간 및 타이밍-함수,선택적 지연,다음 반복-계수,방향 및 채우기-모드를 씁니다 animation: fadeIn 0.6s ease 1 both. 이름을 먼저 쓰는 것은 키프레임 이름이 CSS 키워드가 아니기 때문에 합법적이며,마지막에 이름을 묻어 두는 것보다 더 명확하게 읽습니다.
모두를 잡아내는 한가지 규칙은 두개의 시간값입니다. 지속시간과 지연은 둘다 시간이고,CSS 는 위치별로만 구분해줍니다: 첫번째 시간값은 지속시간이고 두번째는 지연입니다. 속기의 다른 모든 것은 키워드나 단위가 없는 숫자이기 때문에 시간과 혼동할 수 없습니다. 그렇기 때문에 도구는 지연이 0 일 때 안전하게 삭제할 수 있습니다. 왜냐하면 단위가 없는 1 또는 단어 infinite 그 다음은 틀림없이 반복 카운트이지 두 번째가 아닙니다. 생성기는 또한 CSS 기본값과 동일한 값을 생략하므로 a normal 방향 또는 a none fill-mode 는 절대 출력을 어수선하게 만들지 않습니다. 그 결과는 규칙을 알고 나면 손으로 쓰는 방법을 읽는 속기입니다.
왜 내 CSS 애니메이션이 재생되지 않습니까?
이것은 절벽이며,거의 모든 사람들이 적어도 한 번은 걸어 나갑니다. 가장 일반적인 단일 원인은 사이의 불일치입니다 animation-name 그리고 그 이름은 @keyframes 규칙. 오타,대문자 차이,또는 한 곳에서 이름이 바뀌고 다른 곳에서는 이름이 바뀌지 않은 이름은 브라우저에 바인딩할 키프레임 규칙이 없으므로 묵묵히 아무 작업도 수행하지 않습니다. 오류도 없고 경고도 없습니다; 요소는 단순히 거기에 있습니다. 이 생성기는 같은 이름에서 두 부분을 함께 쓰기 때문에 해당 버그 클래스 전체가 사라지며 이는 요점의 큰 부분을 차지합니다.
다른 원인은 여러분이 애니메이션을 손으로 쓸 때 나타나기 때문에 알 가치가 있습니다. 0 의 지속시간은 애니메이션이 즉시 완료되고 여러분이 절대 보지 못한다는 것을 의미합니다. 즉,요소 display: none 는 애니메이션을 전혀 실행하지 않으므로 렌더링되는 요소에 따라 달라지는 페이드인은 실행되지 않습니다. 키프레임 내부의 누락되거나 철자가 틀린 속성은 플래그가 지정되지 않고 조용히 무시됩니다. 그리고 애니메이션이 있습니다 animation-fill-mode: none기본값은 요소가 끝나는 순간 만장일치 스타일로 다시 스냅됩니다. 이는 모션이 미묘하면 실행되지 않은 것처럼 보일 수 있습니다. 라이브 미리보기에서 애니메이션을 시청하면 이러한 대부분의 표면이 몇 초 만에 나타납니다. 이는 계속 다시 로드하는 파일이 아닌 볼 수 있는 모션을 구축하는 경우입니다.
애니메이션-채우기-모드는 무엇을 합니까?
채우기 모드는 사람들이 마지막으로 이해하고 가장 필요로하는 설정입니다. 그것은 어떤 지연 동안 시작하기 전에 모두 animation's 활성 창 밖에서 요소가 보여주는 스타일을 결정합니다. 기본값, none는,요소가 애니메이션이 실행되지 않을 때 첫 번째와 마지막 키프레임을 무시한다는 것을 의미하므로,애니메이션 전에 정상적인 스타일로 앉아 있다가 그 후에 다시 스냅됩니다. 그 스냅백은 매우 일반적인 좌절의 근원입니다: 당신은 페이드 인할 요소를 애니메이션화하고,아름답게 페이드 인되고,애니메이션이 끝나는 순간 다시 사라집니다. 왜냐하면 none 더 파이널 opacity: 1 애니메이션이 끝나면 키프레임이 삭제됩니다.
수정은 animation-fill-mode: forwards애니메이션이 완료된 후 마지막 키프레임을 계속 적용하여 페이드인 요소가 계속 표시됩니다. backwards 애니메이션이 시작되기 전에 지연되는 동안 첫 번째 키프레임을 적용합니다. 이는 지연이 있고 요소가 기본 상태로 먼저 깜박이는 것을 원하지 않을 때 유용합니다. both 두 가지를 동시에 수행하며 입구 애니메이션에 대한 가장 안전한 일반적인 선택입니다. 이것이 바로 이 생성기가 새 애니메이션을 기본값으로 설정하는 이유입니다 both. 채우기 모드를 이해하는 것은 착지하는 입구와 스스로 취소하는 입구의 차이이며, 사양을 차갑게 읽는 것보다 미리보기에서 토글하고 엔딩 변경을 관찰하면 파악하기가 훨씬 쉽습니다.
애니메이션 루프는 언제 해야 하며 어떻게 제어하나요?
반복 횟수는 애니메이션이 몇 번 실행되는지를 결정합니다. 양수 정수로 설정하고 애니메이션은 그 횟수를 여러 번 반복한 다음 중지합니다; 로 설정합니다 infinite 그리고 영원히 반복됩니다. 반복 애니메이션은 주변,지속적인 모션,작업이 일어나고 있음을 보여주는 스피너,콜 투 액션을 살아있게 유지하는 펄스,영웅 이미지에 약간의 생명을 불어 넣는 미묘한 플로트에 대한 올바른 선택입니다. 한 번 실행되는 원 샷 애니메이션은 입구와 출구를위한 것으로 모션의 시작과 끝이 분명하고 반복하면 산만해질 것입니다.
방향 쌍은 반복 횟수와 함께 각 패스가 실행되는 방식을 형성합니다. 기본값 normal 첫 번째 키프레임부터 마지막 키프레임까지 모든 반복을 재생합니다. reverse 각각을 거꾸로 재생합니다. alternate 첫 번째 패스를 앞으로 실행하고 다음 패스를 뒤로 실행하여 엔드포인트 사이를 핑퐁합니다. 이를 통해 키프레임에서 복귀 이동을 정의하지 않고 부드러운 앞뒤 펄스를 구축할 수 있습니다. alternate-reverse 뒤로 시작해서 거기서 번갈아 가며 발전기는 네 가지를 모두 노출시켜서 차이를 느낄 수 있게 합니다: 와 펄스 alternate 동일한 키프레임을 사용하면서 자연스럽게 숨을 들이쉬고 내쉬게 됩니다 normal 그리고 짝수 개의 단계는 반환 자체를 인코딩해야 합니다. 반복 동작의 경우 alternate 거의 항상 더 적은 키프레임 작업으로 더 유기적인 결과를 생성합니다.
부드러운 성능을 위해 어떤 속성을 애니메이션화해야 합니까?
애니메이션으로 만드는 속성은 모션이 1 초에 부드러운 60 프레임으로 실행되는지 아니면 더듬거리는지를 결정하며,선택은 전환과 동일합니다. 선호 transform 그리고 opacity. 둘 다 합성기에 건네지고 브라우저가 페이지 레이아웃을 다시 계산하지 않고 애니메이션 할 수 있으므로 겸손한 하드웨어와로드 중에도 부드럽게 유지됩니다. 이것이 바로 카드가 미끄러지는 이유입니다 transform: translateY 동일한 카드로 애니메이션화되는 동안 손쉬운 느낌이 듭니다 top 또는 margin-top 거친 느낌. 이 발전기에 미리 설치되는 각 입구는 위에 건축됩니다 transform 그리고 opacity 바로 이런 이유에서.
키프레임 시퀀스에서 애니메이션을 방지하는 속성은 레이아웃을 트리거하는 속성입니다: width, height, top, left, margin 그리고 padding. 이들 중 어느 하나라도 변경하면 브라우저가 모든 프레임에서 요소의 형상과 그 주변의 모든 것을 다시 계산하게 되는데,이는 비용이 많이 들고 janky 애니메이션의 가장 일반적인 원인이며,애니메이션이 반복될 때 악화되고 그 비용을 지속적으로 지불하는 요소가 성장하기를 원한다면,a transform: scale 는 거의 항상 애니메이션보다 저렴합니다 width 그리고 height그리고 그것은 거의 동일해 보입니다. 당신을 값싼 길로 이끄는 도구 세트를 조립해야 한다는 더 넓은 주장은 다음과 같습니다 웹 개발자 툴킷 piece와 모션을 느린 결정이 아닌 빠른 결정으로 만드는 워크플로 습관은 다음과 같습니다 개발자 생산성 도구 가이드.
생성기는 어떻게 미리보기를 정직하게 유지합니까?
모든 시각적 빌더는 도구가 재현되지 않는 값을 가르칠 때까지 미리보기와 내보낸 코드가 표류할 위험이 있습니다. 이 생성기는 정확한 값을 주입합니다 @keyframes 페이지에 출력하고 정확하게 적용한다는 규칙을 적용합니다 animation 속기 그것은 미리보기 요소에 당신을 보여줍니다, 그래서 당신이 보는 모션은 복사 된 CSS가 생성 할 모션입니다 동의하지 않을 수있는 별도의 애니메이션 경로가 없으며 미리보기의 키프레임 이름은 출력의 이름입니다.
애니메이션은 마운트에서 실행된 다음 완료되기 때문에 미리보기를 재생하는 방법이 필요합니다. 이 방법은 재생을 누를 때 미리보기 요소를 다시 장착하여 도구가 처리합니다. 이는 원샷 애니메이션이 프로덕션에서 작동하는 방식을 반영하며, 요소가 나타날 때 재생된 다음 채우기 모드에 따라 최종 상태를 유지합니다. 출력도 최소로 유지되어 지연 제로와 기본값이 떨어지므로 의미 있는 선언만 복사합니다. 이는 실행되는 중복되는 내용을 전혀 방출하지 않는 것과 동일한 규율입니다 CSS 필터 생성기 그리고 다른 시각적 빌더들. 키프레임 애니메이션을 요소의 위치를 지정하는 레이아웃과 페어링하면,the 플렉스박스 생성기 주변 구조물을 건설하는 데 자연스러운 동반자입니다.
CSS 애니메이션을 지원하는 브라우저는 무엇입니까?
CSS 애니메이션은 현재의 모든 브라우저에서 지원되며 10 년 이상 잘되었습니다. The @keyframes 규칙, animation 속기와 모든 롱핸드는 보편적이고 접두사가 없기 때문에 이 생성기의 출력은 공급업체 접두사나 대체 없이 Chrome,Firefox, Safari 및 Edge 에서 작동합니다. 최종 참조는 W3C 의 CSS Animations Level 1 사양으로,속기의 각 부분이 어떻게 동작하는지에 대한 기본 소스이며,생성기가 조각이 수행하는 작업에 대한 물리적 느낌을 주면 읽을 가치가 있습니다. 접근성을 위해 일부 사용자는 a 를 설정한다는 점을 기억하십시오 prefers-reduced-motion 선호도, 그리고 그것을 존중 하는 미디어 쿼리에 비 필수 반복 애니메이션을 래핑 하는 것이 좋습니다., 그래서 주변 모션은 불편 하 게 찾는 사람들을 위해 끌 수 있습니다.
더 넓은 시각적 CSS 도구 세트, 전환 생성기 및 변환을 조립하는 경우 CSS 변환 생성기 변환은 대부분의 애니메이션이 이동하고 전환은 상태 변경을 처리하는 원료이기 때문에 자연스럽게 이 애니메이션 옆에 앉으십시오. 애니메이션은 그렇지 않습니다. 여기에 있는 모든 것은 클라이언트 측에서 실행되며 복사하는 CSS는 런타임, 빌드 단계 및 종속성 없이 사용할 수 있습니다.
자주 묻는 질문
CSS 애니메이션 생성기란 무엇입니까?
CSS 애니메이션 생성기는 선택한 설정에서 키프레임 애니메이션을 구축하는 시각적 도구입니다. 사전 설정을 선택하고 지속 시간, 완화, 지연, 반복 횟수 및 방향을 설정하고 다음을 출력합니다 @keyframes 규칙과 animation 라이브 미리보기와 함께 속기를 재생할 수 있습니다.
CSS 애니메이션과 CSS 전환의 차이점은 무엇입니까?
전환은 두 상태 사이의 단일 변경에 애니메이션을 적용하고 실행하려면 호버와 같은 트리거가 필요합니다. An animation follows a @keyframes 단계 수에 관계없이 시퀀스를 수행하고, 루프를 적용할 수 있으며, 상태 변경을 기다리지 않고 적용되자마자 자체적으로 시작됩니다.
애니메이션 속기는 어떤 순서를 사용합니까?
이 도구는 키프레임 이름을 먼저 작성한 다음 지속 시간, 타이밍 기능, 지연, 반복 횟수, 방향 및 채우기 모드를 작성합니다. 예를 들어 애니메이션: fadeIn 0.6s easy 1 둘 다입니다. 첫 번째 시간 값은 항상 지속 시간이고 두 번째 시간 값은 지연이므로 단일 시간 값을 지속 시간으로 읽습니다.
CSS 애니메이션 루프를 영원히 만들려면 어떻게해야합니까?
반복 카운트를 무한으로 설정합니다. 애니메이션에서와 같이 무한이라는 단어인 속기에서: spin 1s linear infinite. 어떤 양의 정수라도 대신 여러 번 반복된 후 채우기 모드와 방향에 따라 중지됩니다.
왜 내 CSS 애니메이션이 재생되지 않습니까?
가장 일반적인 원인은 애니메이션-이름과 @keyframes 이름 사이의 불일치이며,오타 또는 대소문자 차이를 포함하여 브라우저에 바인딩할 규칙이 없습니다. 또한 지속 시간이 0 이상이고 요소가 렌더링되었는지 확인합니다. 디스플레이의 애니메이션: none 요소가 실행되지 않기 때문입니다.
애니메이션-채우기-모드 속성은 무엇을 합니까?
채우기 모드는 애니메이션이 시작되기 전과 끝난 후에 요소가 어떤 스타일을 보여줄지 결정합니다. 기본값 none 은 애니메이션이 끝날 때 요소를 다시 일반 스타일로 스냅합니다. 앞으로 설정하면 최종 키프레임이 유지되고 지연 중에 첫 번째 키프레임이 뒤로 적용되며 둘 다 두 가지 모두를 수행합니다.
부드러운 성능을 위해 어떤 속성을 애니메이션화해야 합니까?
변환 및 불투명도를 선호합니다. 브라우저는 레이아웃을 다시 계산하지 않고도 컴포지터에서 애니메이션을 적용할 수 있으므로 60fps 로 부드럽게 유지됩니다. 너비,높이, 상단,왼쪽 또는 여백 애니메이션을 사용하면 모든 프레임에서 레이아웃 재계산이 강제되며,이는 애니메이션이 끊기는 일반적인 이유입니다.
생성된 애니메이션 CSS는 무료이며 안전하게 사용할 수 있나요?
예. 이 도구는 가입이나 사용 제한이없는 완전 무료이며 모든 최신 브라우저에서 지원되는 표준의 접두사가없는 CSS 를 방출합니다. 모든 처리는 브라우저에서 이루어 지므로 아무 것도 업로드되지 않으며 도구는로드 된 후 오프라인으로 작동합니다.
