CSS 전환

CSS 전환을 사용하면 주어진 기간 동안 속성 값에 부드럽게 애니메이션을 적용할 수 있습니다. CSS 전환은 단순해 보일 수 있지만 대부분의 사람들이 활용하거나 알지 못하는 CSS 전환으로 할 수 있는 일이 많이 있습니다. 몇 년 동안 배운 몇 가지 사항이 있습니다.

기본

전환 속성을 추가하는 가장 간단한 방법은 다음과 같습니다.

.element {
  transition: 1s;
}
.element.transitioned {
  transform: translateX(10px);
}

이렇게 하면 .element 의 animatable properties 변경 사항이 1초(초) 내에 전환됩니다. 그것은 아마도 실제로 당신이 가고 싶은 것이 아닐 것입니다. 훨씬 더 나은 방법은 전환하려는 실제 속성을 참조하는 것입니다.

예를 들어:

.element {
  transition: transform 1s;
}
.element.transitioned {
  transform: translateX(10px);
}

이렇게 하면 .element의 변환 변경만 전환됩니다.

요소의 전환을 보려면 상태를 변경하거나 예를 들어 JavaScript가 있는 클래스를 추가해야 합니다.

상태 변경의 예:

.element {
  transition: transform 1s;
}
.element:hover {
  transform: translateX(10px);
}

호버, 포커스 또는 클래스 추가와 같은 사용자 입력 없이 전환을 추가하려면 css animation 을 사용하는 것이 좋습니다.

위치 위치 위치

transition 속성을 배치하는 위치가 중요합니다. 마우스를 가져갔다가 다시 전환하려는 경우 hover 의사 클래스 없이 요소에 애니메이션을 추가할 수 있습니다. 위의 예처럼. 마우스 아웃과 마우스 입력 시 다른 애니메이션을 추가하려면 두 개의 전환 속성을 추가할 수 있습니다.



위의 예에서 버튼에 :focus 의사 클래스를 사용하여 ~ 클래스와 형제 요소(즉, .transition 선택기 부분)에 애니메이션을 적용했습니다. 첫 번째 요소( .transition--1 )에는 전환 요소만 포커스에 설정되어 있습니다. 즉, 위의 버튼에 초점이 맞지 않으면 요소가 전환 없이 원래 위치로 돌아갑니다. 두 번째 요소.transition--2는 2초 만에 변환 속성을 전환합니다. 세 번째 요소.transition--3는 초점이 맞춰진 상태에서 다른 전환 속성이 ​​설정되어 있습니다. 즉, 1초 안에 :focus 전환되고 초점이 맞지 않거나 흐려지면 2초 안에 전환됩니다.

완화

더 예쁜 전환을 추가하는 '쉬운' 방법은 이징 또는 속도 곡선을 추가하는 것입니다. 몇 가지 사전 정의된 이징이 있습니다.

ease - 느린 시작, 빠른 시작, 느린 종료로 전환 효과를 지정합니다(기본값).

linear - 처음부터 끝까지 동일한 속도로 전환 효과를 지정합니다

.

ease-in - 느린 시작으로 전환 효과를 지정합니다

.

ease-out - 느린 끝으로 전환 효과를 지정합니다

.

ease-in-out - 느린 시작과 끝으로 전환 효과를 지정합니다

.

cubic-bezier(n,n,n,n) - 3차 베지어 함수에서 고유한 값을 정의할 수 있습니다.

입방 베지어는 전환에 매우 사용자 정의 느낌을 추가하는 좋은 방법입니다. 어떤 사람들은 이것을 손으로 쓸 수 있습니다. 저는 확실히 그들 중 하나가 아니지만 I use this tool a lot, 나는 또한 이즈 아웃을 많이 사용합니다.

여러 속성

예를 들어 전환 속성에 여러 속성을 추가할 수 있습니다. 이렇게 하면 먼저 요소를 페이드 인한 다음 변환할 수 있습니다.

이 기능에 대해 정말 실망스러운 점은 변환 기능을 독립적으로 전환할 수 없다는 것입니다(그래도 GSAP와 같은 것을 사용하여 이를 수행할 수 있음). 하지만 여전히 매우 유용합니다. 위의 예에서는 클립 경로 및 변환 속성을 전환합니다. .transition--1의 속성을 동시에 전환하고 .transition--2는 clip-path의 :focus 전환을 지연하고 다시 전환할 때 transform 전환을 지연시킵니다. 이렇게 하면 전환이 훨씬 더 명확해집니다.

고급 예제

다음은 전환으로 실제로 만들 수 있는 몇 가지 예입니다.

Duotone hover animation

Animated 3d toaster

Mobile navigation

Hamburger menu animations

질문/제안?

이 주제에 대한 질문, 제안 또는 좋은 예가 있으면 의견에 알려주십시오.