CSS 애니메이션 및 전환: 빠른 가이드

소개

CSS 애니메이션 및 전환은 웹페이지에 생기를 불어넣을 수 있는 강력한 도구입니다. 이를 통해 사용자 경험을 향상시키는 부드럽고 매력적이며 시각적으로 매력적인 효과를 만들 수 있습니다. 상태 간 간단한 전환을 추가하려는 경우든 주의를 끄는 복잡한 애니메이션을 추가하려는 경우든 이러한 기능의 기본 사항을 이해하는 것이 필수적입니다. 이 가이드에서는 페이드인 효과를 만드는 방법, CSS 전환과 애니메이션의 차이점, 무한 키프레임 애니메이션 만들기, 시작 지연 등을 다룹니다. 전환하고 애니메이션 타이밍 기능을 사용하여 바운스 효과를 만듭니다.

각 예시마다 제가 추가한 코드펜을 통해 코드와 상호작용하고 플레이할 수 있습니다!

CSS 애니메이션을 사용하여 페이드인 효과를 만들려면 어떻게 해야 합니까?

페이드인 효과를 만들려면 @keyframes 규칙을 사용하여 애니메이션 단계를 정의할 수 있습니다. 키프레임은 애니메이션의 시작 및 종료 상태를 지정하고 애니메이션 속성은 애니메이션을 요소에 적용합니다. 예는 다음과 같습니다.

이 코드에서는:

• .fade-in 클래스는 Ease-in-out 타이밍 기능을 사용하여 2초에 걸쳐 fadeIn 애니메이션을 적용합니다.

• @keyframes fadeIn 규칙은 불투명도를 0에서 1로 변경하여 애니메이션을 정의합니다.

CSS 전환과 애니메이션의 차이점은 무엇입니까?

CSS 전환:

• 요소가 한 상태에서 다른 상태로 변경될 때 간단한 상태 변경에 사용됩니다.

• 전환을 시작하려면 트리거(예: :hover, :focus 또는 :checked)가 필요합니다.

• 초기 상태부터 최종 상태까지 속성을 자동으로 보간합니다.

이 예에서는 마우스를 가져가면 .box 요소의 배경색이 0.5초에 걸쳐 파란색으로 전환됩니다.

CSS 애니메이션:

• 여러 단계가 포함된 보다 복잡한 애니메이션 시퀀스에 사용됩니다.

• @keyframes를 사용하여 정의되며 시작하는 데 트리거가 필요하지 않습니다.

• 자동으로 실행하고, 무한 반복하고, 타이밍과 순서를 더 효과적으로 제어할 수 있습니다.

이 예에서 .rotate 클래스는 2초마다 한 번의 전체 회전을 완료하는 연속 회전 애니메이션을 적용합니다.

무한히 실행되는 키프레임 애니메이션을 만들려면 어떻게 해야 합니까?

무한히 실행되는 애니메이션을 만들려면 값이 무한한 animation-iteration-count 속성을 사용하세요. 이렇게 하면 애니메이션이 무한정 반복됩니다. 예는 다음과 같습니다.

.spin 클래스는 요소를 지속적으로 회전시켜 2초마다 한 번의 전체 회전을 완료합니다.

CSS 전환 시작을 어떻게 지연할 수 있나요?

전환 시작을 지연하려면 전환 지연 속성을 사용하세요. 이 속성은 전환이 시작되기 전에 기다려야 하는 시간을 지정합니다. 예는 다음과 같습니다.

이 예시에서는 :hover 이벤트가 발생한 후 2초 후에 배경색이 핫핑크로 변경되고, 전환이 완료되는 데 0.5초가 걸립니다.

바운스 효과를 생성하기 위해 애니메이션 타이밍 기능을 어떻게 사용합니까?

animation-timing-function 속성은 사용자 정의 큐빅 베지어 값 또는 사전 정의된 키워드와 함께 사용하여 다양한 효과를 생성할 수 있습니다. 바운스 효과의 경우 키프레임을 정의하고 여유 또는 사용자 정의 큐빅 베지어 값을 사용할 수 있습니다. 예는 다음과 같습니다.

이 예에서는:

• @keyframes 바운스 규칙은 요소를 위아래로 이동하여 바운스 효과를 정의합니다.

• .bounce 클래스는 이즈 타이밍 기능을 통해 2초마다 무한정 반복되는 바운스 애니메이션을 적용합니다.

결론

이 기사가 도움이 되었기를 바랍니다. 다음 기사에서 만나요!

위 내용은 CSS 애니메이션 및 전환: 빠른 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!