#10. CSS Transitions과 Animations 속성

 

CSS Transitions과 Animations은 웹 페이지에 동적 효과를 추가할 수 있는 강력한 CSS 기술입니다.

 

Transitions: HTML 요소의 스타일이 변화할 때 부드러운 전환 효과를 제공합니다.

Transitions은 다음과 같은 속성으로 구성됩니다.

• transition-property: 전환 효과가 적용될 CSS 속성을 지정합니다.
• transition-duration: 전환 효과의 지속 시간을 지정합니다.
• transition-timing-function: 전환 효과의 속도 곡선을 지정합니다.
• transition-delay: 전환 효과가 시작되기 전의 대기 시간을 지정합니다.

Animations: Animations은 Transitions보다 복잡하고 개발자가 키 프레임을 정의함으로써 더 복잡한 효과를 만들 수 있습니다.

animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state 속성을 사용하여 애니메이션의 스타일을 정의할 수 있습니다.

 

Animations의 주요 속성은 다음과 같습니다.

• animation: 애니메이션에 대한 모든 속성을 한 번에 정의합니다. 
• @keyframes: 애니메이션의 각 키 프레임을 정의합니다. 애니메이션의 전체 절차를 정의하는 데 필요합니다.

 

transition 코드 예제:

button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

button:hover {
  background-color: red;
  color: black;
}

 

1. button 선택자에서, transition-property 속성은 background-color와 color 속성에 대한 전환 효과를 적용합니다.
2. transition-duration 속성에서, 전환 효과의 지속 시간은 1초로 지정되어 있습니다.
3. transition-timing-function 속성에서, 전환 효과의 속도 곡선은 ease-in-out으로 지정되어 있습니다.
4. transition-delay 속성에서, 전환 효과가 시작되기 전의 대기 시간은 0초로 지정되어 있습니다.
5. :hover 선택자에서, 마우스를 버튼에 올리면 background-color는 red로, color는 black으로 변경됩니다.

 

animation 코드 예제:

@keyframes example {
  from {background-color: blue;}
  to {background-color: red;}
}

button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  animation: example 2s;
}​

 

1. @keyframes example에서, 키 프레임은 애니메이션의 각 스텝을 정의합니다. 이 예제에서는 from과 to 키워드를 사용하여 시작과 끝의 background-color 속성을 지정합니다.
2. button 선택자에서, animation 속성은 example 키 프레임에 대한 애니메이션을 2초 동안 적용합니다.

※ 이 예제에서 애니메이션은 버튼이 표시될 때 작동으로 애니메이션이 작동합니다.

 

@keyframe을 지정할 땐 시작(from)과 끝(to)을 지정하지 않고 직접 스탭을 지정해 줄 수도 있습니다.

@keyframes animation_name {
  0% {
    /* style at the start */
  }
  50% {
    /* style at the middle */
  }
  100% {
    /* style at the end */
  }
}

 

 애니메이션 속성 적용 예:

.element {
  animation-name: animation_name;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
  animation-play-state: running;
}

 

위의 예제 에서, animation-name 속성으로 정의한 animation_name 키프레임을 참조하여 애니메이션이 실행됩니다.

animation-duration 속성으로 애니메이션 지속 시간을 5초로 정의하고, animation-timing-function 속성으로 ease-in-out 타이밍 함수를 적용합니다.

animation-delay 속성으로 애니메이션 시작 전에 1초 딜레이를 적용합니다. animation-iteration-count 속성으로 무한 반복을 적용하며, animation-direction 속성으로 alternate 방향을 적용하여 애니메이션이 앞으로/뒤로 진행됩니다.

animation-fill-mode 속성으로 both 값을 적용하여 애니메이션이 시작 전과 종료 후의 스타일을 유지합니다.

마지막으로 animation-play-state 속성으로 running 상태를 적용하여 애니메이션이 재생됩니다.