CSS 전환 및 애니메이션-CSS 튜토리얼-php.cn

CSS 전환 및 애니메이션

WBOY

풀어 주다： 2024-09-05 06:50:43

원래의

441명이 탐색했습니다.

CSS Transitions and Animations

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;
  }

로그인 후 복사

5초: 애니메이션 지속 시간.
easy-in-out: 이징 기능.
1초: 애니메이션이 시작되기 전에 지연됩니다.
3: 애니메이션이 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:

<button class="animated-button">Hover Me!</button>

로그인 후 복사

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;
}

로그인 후 복사

이 예에서는: