알아야 할 CSS3 애니메이션 기술

번역: 당신이 알아야 할 CSS3 애니메이션 기술

번역: 행동 CSS에 대해 알아야 할 사항

저작권을 존중하고 재인쇄 시 이 사이트에 대한 링크를 표시하십시오!

번역 서문: 이 글은 스매싱 매거진에서 번역한 글이지만, 원문의 내용이 다소 얕고 완전하지 않습니다. 프론트엔드 관찰은 번역을 전제로 점점 더 체계적인 내용을 추가합니다. 부족한 부분이 있으면 수정해서 추가해주세요.

웹이 발전하고 브라우저가 더욱 고급 코드를 렌더링할 수 있게 됨에 따라 우리는 모든 플랫폼과 브라우저를 포괄한다는 목표를 달성하기 위한 궤도에 올랐습니다. IE6에서 박스 모델이 정상적으로 보이도록 하는 데 소요되는 시간을 줄일 수 있을 뿐만 아니라 혁신을 장려하고 해킹을 방지하며 프런트엔드 스크립트를 강조하는 분위기를 조성합니다.

인터넷은 공유할 수 있는 풍부한 지식을 갖춘 훌륭한 환경이자 협업 커뮤니티입니다. 우리는 둥근 모서리를 원했고, 여러 배경 이미지를 원했고, 테두리 이미지를 원했고, 그렇게 했습니다. 따라서 수요는 결코 문제가 되지 않습니다. 그렇지 않으면 여전히 테이블을 사용하여 페이지를 레이아웃하고 너무 많은 코드를 사용할 수 있습니다. 우리 모두는 인터넷이 무엇이든 할 수 있다는 것을 알고 있습니다.

인터넷을 위해 태어났습니다

border-radius, box-shadow 및 text-shadow 와 같은 CSS 3 속성은 웹킷(Safari, Chrome 등) 및 Gecko(Firefox)와 같은 고급 브라우저에서 추진력을 얻기 시작했습니다. 이러한 CSS 속성은 이미 사용자를 위해 더 가벼운 페이지와 더 풍부한 경험을 만들고 있으며 우아하게 저하됩니다. 그러나 이는 CSS 3가 우리를 위해 할 수 있는 많은 일 중 일부에 불과합니다.

이 글에서는 한 단계 더 나아가 변환, 전환, 애니메이션과 같은 고급 CSS3 기술을 살펴보겠습니다. 우리는 코드 자체, 브라우저 지원, 그리고 이러한 새로운 속성이 디자인과 전반적인 사용자 경험을 어떻게 향상시킬 수 있는지 제대로 보여주는 몇 가지 예를 다룰 것입니다.

CSS 변환

CSS 변환은 W3C 초안입니다. 그러나 몇 가지를 배우기 위해 처음 자리에 앉아 모든 기능을 읽었을 때 그것은 나에게 깨달음을 주지 못했습니다. 상상할 수 있듯이 이 문서는 기술적인 용어로 작성되었으며 변형된 그래픽(예: 플롯) 요소와 행렬에 더 중점을 둡니다. 미적분학 1학년 때부터 행렬을 다루지 않았기 때문에 이 장에서는 오래된 브라우저 테스트와 추측 및 확인을 많이 해야 했습니다.

제가 찾을 수 있는 모든 튜토리얼과 많은 브라우저 테스트를 읽은 후 모든 사람이 혜택을 받을 수 있는 CSS 변환에 대한 유용한 정보를 생각해 냈습니다.

변환

변환 속성은 SVG로 구현할 수 있는 동일한 기능 중 일부를 구현합니다. 인라인 요소와 블록 요소에 사용할 수 있습니다. 단 한 줄의 CSS 코드로 요소를 회전, 크기 조정 및 이동할 수 있습니다.

일부 아방가르드 디자인에 대한 가장 큰 비판은 텍스트를 선택할 수 없다는 것입니다(사진을 잘라서 구현해야 합니다). 텍스트를 제어하기 위해 변환 속성을 사용하는 데 능숙해지면 이는 더 이상 문제가 되지 않습니다. 이는 순수한 CSS 방법이므로 요소 내의 텍스트는 선택 사항으로 유지되기 때문입니다. 이는 이미지(또는 배경 이미지)를 사용하는 것에 비해 CSS의 큰 장점입니다.

재미있고 유용한 모핑 기능:

회전하다

회전을 사용하면 값을 각도 단위로 전달하여 개체를 회전할 수 있습니다.

규모

스케일은 모든 요소를 ​​더 크게 만들 수 있는 스케일링 기능입니다. 인수로 양수와 음수, 소수를 사용합니다.

번역하다

X 및 Y 좌표를 기준으로 요소 위치를 변경합니다.

비스듬한

이름에서 알 수 있듯이 스큐는 물체를 기울이는 것이며 매개변수는 각도입니다.

행렬

변환은 X 및 Y 좌표를 기준으로 요소의 위치를 ​​변경하는 행렬 변환을 지원합니다.

각 기능에 대해 자세히 살펴보겠습니다.

회전

변환 속성에는 다양한 용도가 있으며 그 중 하나는 변환(회전)입니다. 번역은 각도에 따라 개체를 회전하며 인라인 요소 및 블록 수준 요소에 사용할 수 있으며 멋진 효과를 얻을 수 있습니다.

IE8(비표준 모드)에서는 "filter" 대신 "-ms-filter"를 작성해야 합니다.

브라우저 지원

번역에 대한 브라우저 지원은 놀라울 정도로 광범위합니다. 위의 CSS 스니펫에서는 -webkit- 및 -moz- 접두사를 추가하고 #nav 요소를 -90도 회전합니다.

아주 간단하죠? 유일한 문제는 상당히 중요한 디자인 요소에 대해 IE가 이를 지원하지 않으면 많은 디자이너들이 이를 사용하기를 꺼릴 것이라는 점입니다.

다행스럽게도 IE에는 이를 위한 필터가 있습니다. 바로 그래픽 회전 필터입니다. 0, 1, 2, 3의 4가지 회전 값을 가질 수 있습니다. Webkit 및 Gecko와 동일한 세부적인 제어 기능을 얻을 수는 없지만 적어도 어느 정도 일관성은 유지됩니다(IE6에서도). 이 필터는 4개의 값만 지원하므로 약간 쓸모없어 보이지만 IE의 경우 아무것도 없는 것보다는 낫습니다.

규모

크기 조정은 생각처럼 작동하지 않습니다. 단순히 요소를 축소하거나 확대할 뿐입니다. 확대/축소 기능은 너비와 높이 값을 모두 사용하며 양수, 음수 또는 소수일 수 있습니다.

양수 값은 예상한 대로 지정된 너비와 높이를 기준으로 요소를 확대합니다.

음수 값은 요소를 축소하지 않지만 요소를 뒤집어(예: 텍스트가 반전됨) 그에 따라 크기를 조정합니다. 그러나 1보다 작은 소수(예: .5)를 사용하여 요소를 축소하거나 축소할 수 있습니다.

브라우저 지원

scale 속성은 현재 Firefox, Safari 및 Chrome에서만 지원되며 지금까지 IE 버전에서는 이를 지원하지 않습니다. 객체의 크기를 조정하는 것은 상당히 의미 있는 디자인 선택입니다. 탐색에 약간의 흥미를 더할 수 있는 점진적인 향상:호버를 통해 사용할 수 있습니다.