강 7: CSS 전환 및 애니메이션

이번 강의에서는 CSS 전환 및 애니메이션을 사용하여 웹페이지에 생기를 불어넣는 방법을 살펴보겠습니다. 이러한 기술을 사용하면 JavaScript 없이도 사용자 경험을 향상시키는 부드럽고 매력적인 효과를 만들 수 있습니다.

CSS 전환 소개

CSS 전환을 사용하면 지정된 기간 동안 속성 값을 원활하게 변경할 수 있습니다. 호버 효과, 버튼 애니메이션 및 기타 대화형 요소를 만드는 데 이상적입니다.

1. 기본 구문

전환을 생성하려면 전환에 대한 CSS 속성, 지속 시간 및 선택적 여유 기능을 지정해야 합니다.

• 예:

  .button {
    background-color: #4CAF50;
    transition: background-color 0.3s ease;
  }

  .button:hover {
    background-color: #45a049;
  }

이 예시에서는 마우스를 올리면 버튼의 배경색이 0.3초에 걸쳐 부드럽게 변경됩니다.

2. 여러 속성 전환

여러 속성을 쉼표로 구분하여 한 번에 전환할 수 있습니다.

• 예:

  .box {
    width: 100px;
    height: 100px;
    background-color: #333;
    transition: width 0.5s, height 0.5s, background-color 0.5s;
  }

  .box:hover {
    width: 150px;
    height: 150px;
    background-color: #555;
  }

이 예에서는 마우스를 올리면 상자의 너비, 높이, 배경색이 부드럽게 변경됩니다.

3. 완화 기능

감속 기능은 다양한 지점에서 전환 속도를 제어하여 완화, 완화 또는 둘 다와 같은 효과를 생성합니다.

• 일반적인 완화 기능:
  • easy: 천천히 시작한 다음 속도를 높이고 다시 느려집니다.
  • 선형: 일정한 속도를 유지합니다.
  • easy-in: 천천히 시작한 다음 속도를 높입니다.
  • easy-out: 빠르게 시작한 다음 속도가 느려집니다.

CSS 애니메이션 소개

CSS 애니메이션을 사용하면 단순한 전환을 넘어 시간이 지남에 따라 더욱 복잡한 변경 시퀀스를 만들 수 있습니다. 여러 속성에 애니메이션을 적용하고, 타이밍을 제어하고, 키프레임을 생성하여 더 효과적으로 제어할 수 있습니다.

1. 기본 구문

애니메이션을 만들려면 키프레임을 정의하고 애니메이션 속성을 사용하여 요소에 적용하세요.

• 예:

  @keyframes example {
    0% {background-color: red; left: 0px;}
    50% {background-color: yellow; left: 100px;}
    100% {background-color: green; left: 0px;}
  }

  .animate-box {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
    animation: example 5s infinite;
  }

이 예에서는:

• @keyframes 규칙은 배경 색상과 위치를 변경하여 애니메이션 단계를 정의합니다.
• .animate-box 클래스는 5초 동안 실행되고 무한 반복되는 애니메이션을 적용합니다.

2. 애니메이션 타이밍 제어

애니메이션의 타이밍, 지연 및 반복 횟수를 제어할 수 있습니다.

• 예:

  .animate-box {
    animation: example 5s ease-in-out 1s 3 alternate;
  }

• 5s: 애니메이션 지속 시간.
• easy-in-out: 이징 기능.
• 1초: 애니메이션이 시작되기 전 지연됩니다.
• 3: 애니메이션이 세 번 반복됩니다.
• 대체: 애니메이션은 반복할 때마다 방향을 바꿉니다.

3. 전환과 애니메이션 결합

전환과 애니메이션을 함께 사용하여 더욱 역동적인 효과를 만들 수 있습니다.

• 예:

  .button {
    background-color: #4CAF50;
    transition: transform 0.3s ease;
  }

  .button:hover {
    transform: scale(1.1);
  }

  @keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
  }

  .pulse-button {
    animation: pulse 1s infinite;
  }

이 예:

• .button 클래스는 전환을 사용하여 마우스 오버 시 버튼의 크기를 약간 조정합니다.
• .pulse-button 클래스는 애니메이션을 사용하여 지속적인 펄스 효과를 만듭니다.

실제 예:

전환과 애니메이션을 결합하여 반응형 대화형 버튼을 만들어 보겠습니다.

HTML:

Hover Me!

CSS:

.animated-button {
  padding: 15px 30px;
  font-size: 16px;
  color: white;
  background-color: #008CBA;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.animated-button:hover {
  background-color: #005f73;
  transform: translateY(-5px);
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.animated-button:active {
  animation: shake 0.5s;
}

이 예에서는:

• 버튼을 마우스로 가리키면 배경색이 바뀌고 약간 위로 이동합니다.
• 버튼을 클릭하면 커스텀 애니메이션을 사용하여 흔들립니다.

연습 연습

1. 색상을 변경하고 전환을 사용하여 밑줄을 추가하는 링크에 대한 호버 효과를 만듭니다.
2. 요소를 원으로 이동하는 키프레임 애니메이션을 만듭니다.
3. 전환과 애니메이션을 결합하여 크기 조절, 색상 변경 또는 상호 작용 시 애니메이션이 적용되는 버튼이나 카드와 같은 대화형 요소를 만듭니다.

다음: 다음 강의에서는 CSS Flexbox 심층 분석을 살펴보고 Flexbox를 최대한 활용하여 고급 반응형 레이아웃을 만드는 방법을 알아보겠습니다. 계속 지켜봐주세요!

LinkedIn에서 나를 팔로우하세요

리도이 하산