IT 강좌 CSS 기초 027_애니메이션과 전환

애니메이션

CSS 애니메이션은 요소의 속성 값을 점진적으로 변경하는 데 사용할 수 있는 효과입니다. 애니메이션은 너비, 높이, 색상, 배경, 테두리 등 모든 CSS 속성에 적용할 수 있습니다.

animation 속성의 문법은 다음과 같습니다:

• name: 애니메이션의 이름을 지정합니다.
• duration: 애니메이션의 지속 시간을 지정합니다.
• timing-function: 애니메이션의 속도 곡선을 지정합니다.
• delay: 애니메이션의 지연을 지정합니다.
• iteration-count: 애니메이션의 재생 횟수를 지정합니다.
• direction: 애니메이션의 재생 방향을 지정합니다.
• fill-mode: 애니메이션 완료 후 또는 애니메이션이 일시 정지되거나 중지된 후 요소의 스타일을 지정합니다.

예제:

1
    @keyframes animationName{
2
    from {
3
        transform: rotate(0deg);
4
      }
5
      to {
6
        transform: rotate(360deg);
7
        }
8
    }
9
    .example1{
10
    width: 100px;
11
      height: 100px;
12
      background-color: #3498db;
13
      animation: animationName 2s linear infinite; /* 애니메이션 적용, 2초 지속, 무한 반복, 선형 전환 */
14
  }

1
    <div class="example1"></div>

효과:

• @keyframes rotate는 초기 상태(0도 회전)에서 최종 상태(360도 회전)까지의 rotate라는 키프레임 애니메이션을 정의합니다.
• .animated-box 요소는 animation 속성을 통해 애니메이션 이름, 지속 시간, 반복 방식 등을 지정하여 이 애니메이션을 적용합니다.

CSS 애니메이션과 CSS 전환은 모두 요소의 속성 값을 점진적으로 변경할 수 있는 효과입니다. 주요 차이점은 다음과 같습니다:

• 애니메이션은 반복 재생할 수 있지만, 전환은 한 번만 재생됩니다.
• 애니메이션은 재생 방향을 지정할 수 있지만, 전환은 할 수 없습니다.
• 애니메이션은 완료 후 또는 일시 정지/중지 시 요소의 스타일을 지정할 수 있지만, 전환은 할 수 없습니다.

전환

CSS 전환은 요소의 속성 값을 점진적으로 변경할 수 있는 효과입니다. 전환은 너비, 높이, 색상, 배경, 테두리 등 모든 CSS 속성에 적용할 수 있습니다. 전환 효과는 브라우저와 기기에 따라 다를 수 있으며, 성능은 전환의 복잡도에 따라 다를 수 있습니다.

예제:

1
    .example1{
2
        width: 200px;
3
        height: 200px;
4
        background-color: #3498db;
5
        transition: background-color 0.5s ease; /* 전환 속성과 시간 정의 */
6
        }
7
    .example1:hover{
8
        background-color: #e74c3c;
9
        }

1
    <div class="example1"></div>

효과: