CSS와 Motion — 당신도 웹에서 애니메이션을 만들 수 있습니다

누가 애니메이션을 좋아하지 않습니까? 무엇보다 귀하의 웹 페이지가 살아 있다는 느낌을 줍니다. 움직임의 개념이 어떻게 내 마음을 사로잡았는지 기억의 길로 데려갈 수 있지만, 당신에 대해 이야기합시다. 멋진 사용자 인터페이스를 구축하고 프로젝트에 모션을 추가하면 일종의 우아함을 얻을 수 있다는 것을 알고 있습니다. 따라서 누락된 부분을 채워야 합니다. CSS 및 Motion은 웹 페이지에서 버터처럼 부드러운 애니메이션 개발을 시작하는 데 도움이 되는 충분한 기본 사항을 공유하는 짧고 효과적인 가이드입니다.

운동의 원리

Principles of Motion을 이해하는 것은 모든 모션 디자이너 또는 개발자에게 필수적입니다. 애니메이션과 전환은 웹 페이지에서 부주의하게 사용되어 사용자를 흥분시키기보다는 산만하게 만들 수 있습니다. 일반적으로 요소에 애니메이션을 적용하기 전에 애니메이션이 일부 정보를 사용자에게 전달하는지 확인하십시오. 또한 애니메이션이 사용자가 필요한 것에 집중하도록 하십시오. 애니메이션을 사용하는 좋은 예는 사용자 여정의 끝, 즉 이정표를 완료하는 것입니다. 이것은 애니메이션을 표현력 있게 만듭니다.

모션 디자인에 대한 자세한 내용은 Understanding Motion을 참조하십시오.

모션이 언제 사용되어야 하는지 알았으므로 이제 CSS에서 모션을 적용하는 두 가지 방법인 전환과 애니메이션을 이해해야 합니다.

What are Transitions and Animations in CSS? When do I need to use one over the other?

전환

전환은 두 키프레임 사이의 동작입니다. 키프레임을 CSS 스타일 그룹으로 생각하세요. color: red , padding: 20px 등. 전환의 두 키프레임은 유사한 CSS 속성과 다른 값을 가진 요소에 대한 개별 스타일이 될 것입니다. 이해해야 할 것이 많지만 위의 다이어그램은 단순화하는 데 도움이 됩니다.



codepen의 transition 속성은 transition-delay 및 transition-timing-function 를 포함하는 속기 속성입니다.

위의 코드 스니펫은 CSScolor 및 padding 속성을 초기 상태에서 :hover 상태로 1초 안에 꾸준히 수정하는 간단한 CSS 전환을 보여줍니다( 1s ) — CSS 전환은 호버 동작에 의해 트리거됩니다. .

전환은 :hover , :active , :focus 와 같은 의사 클래스에 의해 트리거되지만 의사 클래스에 국한되지 않습니다. 전환 동작을 활성화하기 위해 DOM을 조작하는 동안 기본 스타일로 추가할 수 있습니다. 이에 대한 완벽한 예는 종료 및 입력 전환입니다.

/* NOTE: This code snippet inherits code from the codepen above */

.transition-box.enter {
  color: red;
  padding: 20px;
}

위의 코드 조각에서 enter 클래스가 transition-box div 요소에 추가될 때 전환이 트리거됩니다.

애니메이션

전환은 두 키프레임 간의 동작을 보여주는 데 적합하지만 두 개 이상의 키프레임으로 작업하고 CSS 속성을 변경하는 데 더 많은 유연성이 필요한 경우 어떻게 됩니까? 이것은 애니메이션이 CSS 전환의 단점을 기반으로 구축되는 곳입니다. CSS를 사용하면 백분율로 수많은 키프레임으로 애니메이션을 설정할 수 있습니다.

Recall that a keyframe is a group of CSS styles.

위의 코드 스니펫은 4개의 키프레임이 있는 약간 복잡한 CSS 애니메이션을 생성합니다. 0% , 33% , 66% 및 100% . 이러한 각 키프레임에는 유사한 CSS 속성이 있으며 이러한 속성 중 일부는 다른 값을 가집니다. 키프레임은 백분율을 사용하여 지정된 시간(이 경우 3초)의 일부에서 요소의 상태를 나타냅니다.

/* NOTE: This code snippet inherits code from the codepen above */
animation: cssnmotion 3s ease-in-out infinite;

애니메이션과 전환이 무엇인지 이해하면 과거에 접했던 대부분의 복잡한 애니메이션이 단순한 전환에 불과하다는 사실을 깨닫게 될 것입니다. 개발자는 주어진 간격으로 CSS 속성의 값을 변경하는 구조를 설정했습니다.


복잡성이 증가하면 웹 페이지의 성능이 저하될 수 있으므로 애니메이션은 보다 복잡한 모션 디자인을 위해 남겨두고 최후의 수단으로 사용하는 것이 좋습니다.

CSS와 Motion으로의 여정을 시작하기 위해 많은 것을 배웠기를 바랍니다. 읽어 주셔서 감사합니다!