CSS에서 전환과 애니메이션의 차이점.

일부 사람들은 전환과 애니메이션이 비슷하거나 둘 다 비슷하게 작동한다고 생각하지만 그렇지 않습니다. 둘의 차이점이 무엇인지 봅시다.

전환이란 무엇입니까



Image From
위의 이미지에서 알 수 있듯이 트랜지션은 단순히 이동 또는 위치 변경을 의미하는 것으로 이해할 수 있습니다. 전환 요소에서 상태/위치를 변경합니다. CSS 전환은 요소의 from-to 이동에 가장 적합한 선택입니다. 전환 요소에는 (실제 위치)와 (요소의 목적지)에서 두 가지 상태가 있습니다.
전환을 사용하면 사이트에 간단한 작업을 추가할 수 있습니다. 전환은 CSS에서 애니메이션을 추가하는 간단한 방법입니다. 주어진 시간 동안 요소를 변경하도록 CSS에 지시합니다.

CSS 전환에는 다음 속성이 있습니다.
속성 -- 설명

transition-property -- 전환해야 하는 CSS 속성

transition-duration -- 전환 기간

transition-timing-function -- 애니메이션에 사용되는 타이밍 함수입니다(공통 값: linear, ease). 기본값은 용이함입니다

.

transition-delay -- 애니메이션을 시작하기 전에 대기하는 선택적 시간(초)입니다.

전환에 대한 속기 속성

.element {
  transition: property duration timing-function delay;
}

전환의 간단한 예

#element {
  background-color: black;
  transition-property: font-size;
  transition-duration: 6s;
  transition-delay: 3s;
}
#element:hover {
  background-color: blue;
}

Above example performs a six-second background color transition with a three-second delay between the time the user mouses over the element and the beginning of the animation effect.

애니메이션이란?


애니메이션은 많은 움직임에서 요소 상태를 변경할 수 있는 기능을 제공합니다. 원하는 만큼 CSS 속성을 원하는 만큼 변경할 수 있습니다. 애니메이션을 사용하면 속성 값을 더 잘 제어할 수 있습니다. CSS 전환과 같은 단일 이동에 국한되지 않습니다.
CSS 애니메이션을 사용하려면 먼저 애니메이션에 대한 몇 가지 키프레임을 지정해야 합니다. 키프레임은 특정 시간에 요소가 가질 스타일을 유지합니다. 각 @keyframes at-rule은 애니메이션 중 특정 순간에 발생해야 하는 작업을 정의합니다. 예를 들어 0%는 애니메이션의 시작이고 100%는 끝입니다. 0%에서 100% 사이에서 원하는 만큼 움직임을 추가할 수 있습니다.

애니메이션 속성을 사용하여 요소에 애니메이션을 적용합니다.

.container {
  animation: rotate 10s linear infinite;
}

rotate is the name of the animation, which we need to define separately. We also tell CSS to make the animation last 10 seconds, perform it in a linear way (no acceleration or any difference in its speed) and to repeat it infinitely.

@keyframes rotate {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(180deg);
  }
}

이 경우 Z축을 0에서 100 등급으로 회전하도록 변환 속성을 만들도록 CSS에 지시합니다.

값 설명

animation-name 선택기에 바인딩하려는 키프레임의 이름을 지정합니다

.

animation-duration 애니메이션을 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정합니다

.

animation-timing-function 애니메이션의 속도 곡선을 지정합니다

.

animation-delay 애니메이션이 시작되기 전에 지연을 지정합니다

.

animation-iteration-count 애니메이션 재생 횟수를 지정합니다

.

animation-direction 애니메이션을 번갈아 반복 재생해야 하는지 여부를 지정합니다

.

animation-fill-mode 애니메이션이 실행 중인 시간 외에 애니메이션에 의해 적용되는 값을 지정합니다

.

animation-play-state 애니메이션이 실행 중인지 또는 일시 중지되었는지 지정합니다

.

initial - 이 속성을 기본값으로 설정합니다.

상속 - 부모 요소에서 이 속성을 상속합니다. 상속에 대해 읽어보기

전환에 대한 속기 속성

.element{ animation: name duration timing-function delay iteration-count direction fill-mode play-state; }

감사합니다 !!!