콘텐츠
- 애니메이션에 CSS를 사용하는 이유는 무엇입니까?
- 기능성 애니메이션
- 페이지 전환
- 로더 및 진행률 표시 줄
- 로더를 넘어서 – 스켈레톤 스크린
- 마이크로 인터랙션
- 60fps 달성
- 하드웨어 가속
- CSS 안무
- 디버깅
- JavaScript로 CSS 애니메이션 제어
- 애니메이션 다시 시작
- 플레이 상태 제어
- 미래를 들여다
- CSS 사용자 정의 속성으로 애니메이션
- CSS 모션 경로 모듈
- 애니메이션 받기
최신 브라우저와 디자인 도구는 창의력 측면에서 많은 것을 제공합니다. 모바일 장치는 땀을 흘리지 않고 모든 Retina 화면 픽셀을 밀어 낼 수있을만큼 충분한 성능을 갖춘 포켓 파워 하우스로 변모했습니다. 따라서이 모든 힘을 활용하는 동적 웹 사이트가 매일 등장하고 있다는 것은 놀라운 일이 아닙니다. 사실, 단순한 호버 전환의 형태 든 완전한 예술 작품이든 어떤 식 으로든 CSS 애니메이션을 사용하지 않는 현대적인 웹 사이트를 찾기가 어려울 것입니다.
좋은 애니메이션은 나머지 디자인을 지원하고 브랜드 개성을 표현하는 데 도움이되는 동시에 정적 인 콘텐츠에 생명을 불어 넣을 수 있으며, 움직이는 물체에 대응하도록 고정되어 있기 때문에보다 자연스러운 사용자 경험을 제공 할 수 있습니다.
애니메이션에 CSS를 사용하는 이유는 무엇입니까?
스크립트 기반 애니메이션에 비해 CSS를 사용하는 애니메이션은 배우기 쉽고 JavaScript를 몰라도 사용할 수 있습니다. CSS 미디어 쿼리를 통해 수정할 수 있으므로 반응 형으로 만들 수 있습니다. 비교적 간단한 구문을 가지고 있음에도 불구하고 특히 CSS 전 처리기의 도움으로 매우 복잡한 애니메이션을 만들 수 있습니다.
애니메이션에 CSS 사용은 애니메이션을 설명하는 스타일과 @keyframes 애니메이션 시퀀스의 중간 단계를 정의하는 블록입니다. 애니메이션의 모든 측면은 쉽게 이해할 수있는 속성 집합을 통해 제어됩니다. 애니메이션 이름, 애니메이션 기간, 애니메이션 타이밍 기능, 애니메이션 지연, 애니메이션 반복 횟수, 애니메이션 방향, 애니메이션 채우기 모드 과 애니메이션 재생 상태. 또한 있습니다 생기 property, 다른 모든 것을 결합하는 속기 구문입니다.
다음은 CSS 애니메이션 코드가 가장 간단한 형태입니다.
/ * 애니메이션 설명 * / .slide-right {animation : slide-right 0.5s ease-in-out 0.2s infinite alternate both; } / * 애니메이션 단계 * / @keyframes slide-right {0 % {transform : translateX (0); } 100 % {변환 : translateX (100px); }}
동일한 구문을 사용하면 다른 HTML 요소와 동일한 방식으로 SVG에 애니메이션을 적용 할 수 있습니다.
CSS 애니메이션의 다양한 측면과이를 사용하여 전반적인 사용자 경험을 향상시키는 방법을 살펴 보겠습니다.
기능성 애니메이션
인터페이스에서 다양한 기능을 수행하기 위해 애니메이션을 적용 할 수 있습니다. 특정 프로세스를 통해 사용자를 성공적으로 안내하고 방향을 개선하며 시각적 피드백도 제공 할 수 있습니다. 이러한 애니메이션은 고품질의 브랜드 기반 사용자 경험을 디자인하는 데 매우 중요한 역할을합니다. 기능적 애니메이션의 몇 가지 예를 살펴 보겠습니다.
페이지 전환
웹 사이트 탐색 링크를 클릭하면 일반적으로 사용자 인터페이스가 갑자기 변경됩니다. 페이지가 요청되고 브라우저가 서버로부터 응답을 받으면 새 페이지가 표시되기 전에 빈 화면이 잠깐 깜박입니다. 이로 인해 사용자의 워크 플로가 중단되고 방향을 잃을 수 있습니다. 페이지 전환은 산만 한 효과를 최소화하는 데 도움이됩니다.
브라우저가이를 처리하도록하는 대신 요청을 가로 채고 백그라운드에서 비동기식으로 새 콘텐츠를로드 한 다음 CSS 애니메이션을 사용하여 준비가되면 다른 페이지로 원활하게 전환 할 수 있습니다. 이는 맥락을 유지하면서 연속성을 높이는 데 도움이됩니다.
로더 및 진행률 표시 줄
좋은 상호 작용 디자인의 중요한 측면은 시각적 피드백을 제공하는 것입니다. 사용자가 무슨 일이 일어나고 있는지 또는 상호 작용의 결과가 성공했는지 여부를 궁금해하게해서는 안됩니다.
예를 들어 페이지 전환을 사용할 때 페이지가로드되고있을뿐만 아니라 곧 표시 될 것임을 사용자에게 알려야합니다. 이를 달성하는 한 가지 방법은 작업이 진행 중임을 나타내는 애니메이션 로더를 표시하는 것입니다.
기간을 측정 할 수 있으면 대신 진행률 표시 줄을 표시 할 수 있습니다. 이 방법은 페이지가 완전히로드되는 데 걸리는 시간에 대한 유용한 정보를 제공합니다.
로더를 넘어서 – 스켈레톤 스크린
로더에 대한 대체 솔루션은 스켈레톤 화면으로인지 성능을 크게 향상시킬 수 있습니다. 스켈레톤 화면은 콘텐츠가 백그라운드에서로드되는 동안 표시되는 UI의 단순화 된 그래픽 표현입니다. UI는 더 작은 스켈레톤 이미지 블록으로 분할 된 다음 준비가되는 즉시 실제 콘텐츠로 교체됩니다. CSS 애니메이션을 사용하여 콘텐츠가로드 중임을 표시하고 변경 사항이 점진적으로 표시되도록 할 수 있습니다.
마이크로 인터랙션
마이크로 인터랙션은 우리가 거의 자동으로 수행하는 작은 작업입니다. 트윗을 좋아하고, 장바구니에 항목을 추가하고, 링크를 공유하는 등 모든 것이 마이크로 인터랙션입니다. CSS 애니메이션을 사용하여 시각적 단서를 제공하고 작업 결과를 쉽게 이해할 수 있도록 만들 수 있습니다. 한 가지 예는 CTA 또는 다양한 UI 버튼이 눈에 보이도록 만드는 것입니다.
또한 CSS 애니메이션을 사용하여 상태간에 의미있는 전환을 만들 수 있습니다. 예를 들어 메뉴 버튼을 원래 모양에서 'X'아이콘으로 모핑하여 동일한 버튼을 다시 클릭하여 탐색을 닫을 수 있음을 암시합니다. 이러한 디자인은 유익 할뿐만 아니라 유익합니다.
애니메이션은 장바구니에 새 항목을 추가하는 것과 같이 UI의 변경 사항을 강조하여 사용자의주의를 끌 수도 있습니다.
60fps 달성
CSS 애니메이션과 관련하여 명심해야 할 한 가지는 성능입니다. 애니메이션을 버벅 거림없이 유지하고 최대한 원활하게 실행하는 것이 중요합니다. 그렇지 않으면 전체 경험을 향상시키는 대신 매우 빠르게 망칠 위험이 있습니다. 자주 테스트하는 것 외에 부드러운 애니메이션을 만드는 마법의 방법은 없지만 위험을 최소화하기 위해 따를 수있는 몇 가지 원칙이 있습니다.
하드웨어 가속
항상 하드웨어 가속 CSS 속성에만 애니메이션을 적용하는 것을 목표로합니다. 변형과 불투명도 두 가지만 있기 때문에 기억하기 쉽습니다. 목표는 브라우저의 관점에서 가장 저렴한 합성 레이어에서 모든 변경 사항이 발생하는 것입니다.
변경된 다른 속성은 레이아웃 또는 다시 그리기 작업을 트리거하므로 비용이 더 많이 듭니다. 가능하면 애니메이션을 사용하지 마십시오.
변형 속성을 사용하여 개체의 크기를 조정, 기울이기, 회전 및 이동할 수 있습니다. left, top, right 및 bottom 속성을 사용하여 요소의 위치를 변경하는 것은 일반적인 실수입니다. 이를 애니메이션하면 브라우저가 레이아웃을 다시 계산합니다. 대신 transform : translateX () 및 transform : translateY ()를 사용하십시오.
CSS 안무
한 번에 너무 많은 요소에 애니메이션을 적용하지 마십시오. 애니메이션 대신 슬라이드 쇼가 표시 될 수 있습니다. 많은 개체를 애니메이션해야하는 위치에있는 경우 해당 동작을 조정하십시오. 애니메이트 할 요소와 애니메이트 할 방법 및시기를 미리 계획하십시오.
애니메이션 지연은 이와 관련하여 매우 유용합니다. 타이밍이 좋으면 깔끔한 스 태거 모션 효과를 만드는 데 사용할 수도 있습니다. 애니메이션 시작 시간을 오프셋하면 애니메이션이 동시에 시작되지 않으므로 브라우저의 부담이 줄어 듭니다. 루프 기능을 지원하는 CSS 전 처리기 또는 JavaScript를 사용하면 훨씬 쉽습니다.
SCSS에서 애니메이션 지연 속성을 엇갈리게 만드는 방법은 다음과 같습니다.
.staggered {animation : slide .7s ease-out both; } @for $ i 1부터 10까지 {.staggered : nth-child (# {$ i}) {animation-delay : 0.05s * $ i; }}
안무를 완전히 마스터하기 위해서는 약간의 실험이 필요할 수 있지만 그 노력은 더 나은 성능으로 보상받을 것입니다.
디버깅
CSS 애니메이션 디버깅은 어려운 작업이 될 수 있으며 이와 관련하여 도움이 필요합니다. Chrome 및 Firefox 개발자 도구를 사용하면 키 프레임 애니메이션을보고 조정하고 속도를 늦추고 성능을 추적 할 수 있습니다. 이러한 도구에 익숙해지는 것은 확실히 가치가 있습니다.
JavaScript로 CSS 애니메이션 제어
때로는 애니메이션에 대한 더 많은 제어가 필요한데, 이것이 바로 JavaScript가 들어오는 곳입니다. CSS만으로는 할 수없는 일들이 있습니다. JS를 사용하면 animationstart, animationiteration 및 animationend와 같은 다양한 애니메이션 콜백 기능을 활용할 수 있습니다.
애니메이션 다시 시작
사소하게 들리지만 사용자 입력에 대해 CSS 애니메이션을 다시 시작하는 것은 때때로 놀랍도록 까다 롭습니다. 단순히 요소에서 애니메이션 클래스를 제거하고 다시 추가하는 것은 작동하지 않습니다. 요소에서 리플 로우를 트리거하려면과 사이에 추가 단계가 필요합니다. 방법은 다음과 같습니다.
const elem = document.querySelector ( '# animated-element'); const btnRestart = 문서. querySelector ( '# btn-restart'); const restartAnimation = 이벤트 => {event.preventDefault (); elem.classList.remove ( 'animating'); // 리플 로우를 트리거합니다. void element.offsetWidth; elem.classList.add ( 'animating'); }; btnRestart.addEventListener ( 'click', restartAnimation, false);
마지막 수단으로 DOM에서 요소를 제거하고 다시 추가하면 애니메이션도 다시 시작됩니다.
플레이 상태 제어
비슷한 방식으로 JS를 사용하여 CSS 애니메이션을 일시 중지하고 다시 시작할 수 있습니다.
const elem = 문서. querySelector ( '# animated-element'); const btnPlay = 문서. querySelector ( '# btn-play'); const btnPause = 문서. querySelector ( '# btn-pause'); const playAnimation = event => {event.preventDefault (); elem.style.animationPlayState =’실행 중’; }; const pauseAnimation = event => {event.preventDefault (); elem.style.animationPlayState =’일시 중지됨’; }; btnPlay.addEventListener (’click’, playAnimation, false); btnPause.addEventListener (’click’, pauseAnimation, false);
미래를 들여다
사양에 요약 된 몇 가지 흥미로운 표준 CSS 기능이 현재 파이프 라인에 있으며 일부 브라우저에서 이미 일부 구현되었습니다. CSS 애니메이션 관점에서 볼 때 특히 흥미로운 두 가지는 CSS 변수 또는보다 정확한 CSS 사용자 정의 속성과 모션 경로 모듈입니다.
CSS 사용자 정의 속성으로 애니메이션
한동안 CSS 전 처리기에서 변수를 사용할 수 있었지만 한 가지는 CSS 사용자 정의 속성을 애니메이션 시나리오에서 훨씬 더 유연하고 매우 유용하게 만듭니다.
getProperty (), setPropertyValue () 및 removeProperty () JS 메소드를 통해 런타임에 동적으로 조작 할 수 있다는 사실을 확실히 활용할 수 있습니다. 예를 들어, CSS 코드는 다음과 같을 수 있습니다.
# animated-obj {--xPos : 100px; 애니메이션 : 슬라이드 .4 초이지 아웃 둘 다; } @keyframes slide {to % {transform : translateX (var (-xPos)); }}
그런 다음 JS에서 --xPos 속성에 액세스 할 수 있습니다.
const elem = 문서. getElementById ( 'animated-obj'); // CSS 코드에 선언 된 속성 값을 읽습니다. const currentX = elem.style. getPropertyValue ( '-xPos');
새 값으로 설정
elem.style.setProperty (’-xPos’,’300px’);
속성 제거
elem.style.removeProperty ( '-xPos');
이를 통해 흥미로운 가능성이 열리고 이전에는 불가능했던 애니메이션과 CSS 변수를 결합하는 새로운 방법이 개발자에게 제공됩니다. 이 기능의 이미지에서 CodePen의 CSS 변수를 사용한 애니메이션의 훌륭한 예를 볼 수 있습니다.
사용자 지정 속성은 상속 가능하다는 점을 언급 할 가치가 있습니다. 값을 변경하면 모든 자식에 대한 스타일 재 계산이 트리거되므로 가장 구체적인 수준에서 설정하는 것이 좋습니다.
CSS 모션 경로 모듈
모션 경로 모듈을 사용하면 사용자 지정 경로를 따라 개체를 애니메이션 할 수 있습니다. 사양은 오프셋 경로, 오프셋 거리 및 오프셋 회전 속성을 정의합니다. offset-path는 애니메이션 중에 객체가 이동할 좌표를 정의하고 offset-distance는 오프셋 경로를 따라 위치를 지정하고 offset-rotate는 오프셋 경로를 따라 배치하는 동안 요소의 방향을 정의합니다.
다음은 CSS의 간단한 예입니다.
.animated-obj {오프셋 경로 : 경로 ( 'M100,250 C 100,50 400,50 400,250'); 오프셋 회전 : 자동; 애니메이션 : .5s 선형 무한 이동; } @keyframes move {from {offset-distance : 0 %; } ~ {오프셋 거리 : 100 %; }}
애니메이션 받기
애니메이션이 플래시 배너와 팝업을 의미했던 시대와 마찬가지로 정적 화면을위한 디자인의 시대는 지났습니다. 우리는 현대 웹의 상호 작용 적 특성을 환영하고 나중에 생각하기보다는 초기 단계에서 애니메이션에 대해 생각하기 시작해야합니다.
아직 해보지 않으 셨다면 지금이 CSS 애니메이션의 흥미 진진한 세계로 뛰어 들기에 완벽한시기입니다. 약간의 창의성, 신중한 계획 및 현대적인 도구로 달성 할 수없는 것은 거의 없습니다.
웹 디자인 이벤트런던 생성2018 년 9 월 19-21 일에 돌아와 업계를 선도하는 연사 일정, 하루 종일 워크숍 및 소중한 네트워킹 기회를 제공합니다. 놓치지 마세요.지금 생성 티켓 받기.
