2024.08.21 (Day 16) - HTML/CSS [ CSS Animation: transform, transition, animation]

Animation, Transition 주요 속성과 활용
Transform 주요 속성과 활용
:hover 가상 클래스의 활용

 

(노트북 이슈로인한 직접 작성한 코드 및 티스토리 내용이 몽땅 날아가버려서 교수님의 자료 + pdf로 대체하겠슴 ㅜㅠ)

 

---

Transform

 

transform속성은 요소의 크기(scale), 위치(translate), 회전(rotate), 기울기(skew)를 적용할 수 있다.

또한 시각적 부분의 변화만을 제공하며 레이아웃에 직접적인 영향을 주지 않는다 (기존 공간 유지)

 

.circle {
  transform: rotate(45deg) translateX(100px);
}

 

변환 함수

변환 함수는 띄어쓰기를 통해 조합하여 사용될 수 있으며, 이때 각각의 변환은 독립적으로 적용되지만,

변환의 순서에 따라 최종 효과가 달라진다 

 

1. 변환 함수는 한 묶음으로 해석한다
여러 개의 변환 함수가 transform 속성에 한꺼번에 사용되면, 이 함수들은 하나의 변환 명령으로 해석되어 

요소에 적용한다. 이는 즉, 각각의 변환이 독립적으로 작동하는 것이 아니라, 결합되어 한 번에 처리된다는 의미이다.

.box {
  transform: translateX(50px) rotate(45deg);
}
.box:hover {
  /* 기존의 translateX(50px)는 취소 */
  transform: rotate(-45deg);
}

 

translateX(50px) rotate(45deg)의 계산 결과 = "변환 행렬" transform: rotate(-45deg)의 계산 결과 = "변환 행렬" 요렇게 각각 값이 만들어진다 만들어진 값이 transition속성이 이 중간치 값을 만들어주는것이다 이런 값 자체가 연산이라고 보는 것

 

2. 변환 속성의 작성 순서는 중요하다.
변환이 적용되는 순서에 따라 최종 결과가 달라지게 된다.. transform 속성에 여러 변환 함수를 사용할 때, 첫 번째 함수가 먼저 적용되고, 그 다음 함수가 이어서 적용되는 방식으로 진행된다.

 transform: translateX(50px) rotate(45deg);

 

▲ 이 경우 요소가 먼저 X축으로 50px 이동하고, 그 다음에 회전된다.

따라서 회전의 중심점이 이동된 위치를 기준으로 한다. (1. 이동, 2. 회전)

 

transform: rotate(45deg) translateX(50px);

 

▲ 이 경우 요소가 먼저 회전하고 나서 X축으로 50px 이동한다. 

회전 동작에 의해 방향이 45도 틀어진 상태 기준에서 이동 동작이 이루어지게 된다.

 

▼ 결과

빨간 박스가 translateX 먼저 적용하고 파란 박스가 rotate 먼저적용한 상태

 

 

컨테이닝 블록과 스태킹 컨텍스트

transform이 적용된 요소는 position: absolute 또는 position: fixed가 부여된 요소의 컨테이닝 블록이 될 수 있다.

보통 특정 요소에게 transform 원래의 용도를 위해 사용 하였다가, 하위 요소중 position: absolute된 요소에게

예기치 못한 영향이 가해 지는것을 발견할 때가 많이 있다.

transform 속성이 적용된 요소는 새로운 스태킹 컨텍스트를 형성한다. 

이 말은, 해당 요소가 z-index의 기준이 된다는 것을 의미한다.
즉, transform이 적용된 요소의 하위 요소들은 이 새로운 스태킹 컨텍스트 내에서만 z-index에 의해 정렬된다. 

이는 z-index 값이 같은 문서의 다른 부분에 있는 요소들에 영향을 미치지 않고, 

오직 같은 스태킹 컨텍스트 내의 요소들 간에만 영향을 미친다는 것을 의미한다.

---

Transition

transition 속성은 CSS 속성의 값이 일정 시간 동안 자연스럽게 변화하도록 애니메이션 효과를 적용한다. 

즉, 한 상태에서 다른 상태로의 변화가 즉시 이루어지지 않고, 부드러운 전환 효과를 준다.

 

.box {
  transition: property duration timing-function delay;
}
.box {
  /* 보통 이렇게 단축 속성의 형태로 많이 쓰인다 */
  transition: all .4s;
}

 

• property: 애니메이션 효과를 적용할 CSS 속성
• duration: 전환이 완료되는 시간
• timing-function: 애니메이션의 시간 흐름을 제어하는 함수
• delay: 애니메이션이 시작되기 전의 대기 시간
  
  

.box {
  /* transition은 보통 상태(:hover)가 변하기 전에 미리 입력 해 둡니다. */
  transition: transform .4s;
  transform: scale(1);
}
.box:hover{
  transform: scale(1.4);
}

 

 

transition 속성 

▼ transition-property 

애니메이션 효과를 적용할 속성을 지정한다. 모든 속성에 대해 전환 효과를 적용하려면 all을 사용할 수 있다.

.box {
  transition-property: width; /* 모든 속성에 대한 전환 효과는 all */
}

 

 

▼ transition-duration
전환이 완료되는 시간을 설정한다. 시간 단위는 초(s) 또는 밀리초(ms)를 사용한다.

.box { 
  transition-duration: 1.5s;  /* ms단위로 표현 가능(0.5s = 500ms */
}

 

 

1.5초 설정

 

▼ transition-timing-function
애니메이션의 시간 흐름을 조절한다. 전환 속도가 일정하지 않으며,

linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier()와 같은 다양한 타이밍 함수가 사용된다.

.box {
  transition-timing-function: ease-in;
}

 

▷ liner  = cubic-bezier(0.0, 0.0, 1.0, 1.0) 

일정한 속도를 유지한다.

 

▷ ease = cubic-bezier(0.25, 0.1, 0.25, 1.0)

기본 값으로 볼 수있으며 점점 속도가 빨라지다가 애니메이션이 진행되는 중간 시점을 기준으로 점점 느려진다.

 

▷ ease-in = ease-in cubic-bezier(0.42, 0, 1.0, 1.0)

느리게 시작해서 속도가 점점 빨라진다.

 

▷ ease-out = cubic-bezier(0, 0, 0.58, 1.0)

ease-in과 반대로 빠르게 시작해서 속도가 점점 느려진다.

 

▷ ease-in-out = cubic-bezier(0.42, 0, 0.58, 1.0)

ease와 마찬가지로 속도가 점차 빨라지다가 다시 느려지나, ease보다 시작 속도가 느리다.

 

See the Pen Untitled by 윤형섭 (@mixrecgm-the-encoder) on CodePen.

 

 

 

▼ transition-delay 

애니메이션이 시작되기 전에 대기하는 시간을 설정한다.

.box {
  transition-delay: 1s;
}

 

 

 

Animation

animation속성은 미리 작성된 @keyframes를 이용 한다. 

@keyframes는 CSS 애니메이션을 정의하는 데 사용된다.

이 규칙을 통해 애니메이션 중간 단계의 스타일을 지정할 수 있으며, 

애니메이션이 어떻게 변화할지를 결정할 수 있다,

 

@keyframes slide-in {
  0% { /* 시작 상태 */ 
    transform: translateX(-100%);
  } 
  100% { /* 종료 상태 */ 
    transform: translateX(0);
  } 
}

 

slide-in은 키프레임의 이름이며. animation-name으로 지정할 때 사용된다.
중간에 자유롭게 40%, 60% 등 키프레임을 추가할 수 도 있다.

 

animation 속성

1. animation-name - 적용할 애니메이션의 이름을 지정한다.

@keyframes slide-in { /*애니메이션이름*/
  0% { /* 시작 상태 */ 
    transform: translateX(-100%);
  } 
  100% { /* 종료 상태 */ 
    transform: translateX(0);
  } 
}

 

2. animation-duration - 애니메이션이 완료되는 시간을 설정한다. (지속시간)

animation-duration: 2s

 

 

See the Pen duration by 윤형섭 (@mixrecgm-the-encoder) on CodePen.

 

3. animation-timing-function - 애니메이션의 시간 흐름을 조절한다

애니메이션이 일정한 속도로 실행되지 않고, 속도가 가속되거나 감속될 수 있디.
ex) linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier()

animation-timing-function: linear;

 

See the Pen Untitled by 윤형섭 (@mixrecgm-the-encoder) on CodePen.

 

4. animation-delay - 애니메이션이 시작되기 전에 대기하는 시간을 설정한다.

animation-delay: 1s;

 

See the Pen delay by 윤형섭 (@mixrecgm-the-encoder) on CodePen.

 

5. animation-iteration-count - 애니메이션이 몇 번 반복될지를 설정한다,
infinite (무한 반복) 또는 숫자 값

  animation-iteration-count: infinite / number ;

 

 

See the Pen Untitled by 윤형섭 (@mixrecgm-the-encoder) on CodePen.

 

6. animation-direction- 애니메이션이 재생될 방향을 설정한다.
ex) normal, reverse, alternate, alternate-reverse

animation-direction: alternate;

 

See the Pen Untitled by 윤형섭 (@mixrecgm-the-encoder) on CodePen.

 

7. animation-fill-mode - 애니메이션이 끝난 후, 또는 시작하기 전에 요소가 어떻게 보일지를 설정한다.

- none: 애니메이션이 시작되기 전과 종료된 후에 요소는 원래의 스타일로 돌아간다.
- forwards: 애니메이션이 끝난 후에도 마지막 키프레임에서 설정한 스타일을 유지한다..

애니메이션이 종료된 후 요소가 최종 상태에 고정된다.
- backwards: 애니메이션이 시작되기 전, 첫 번째 키프레임에서 설정한 스타일을 즉시 적용한다.

이는 애니메이션이 지연되더라도 해당 스타일이 적용됨을 의미한다.
- both: forwards와 backwards의 기능을 결합하여, 애니메이션이 시작되기 전에는 첫 번째 키프레임의 스타일을 유지하고, 종료된 후에는 마지막 키프레임의 스타일을 유지한다.

animation-fill-mode: forwards;

 

 

8. animation-play-state - 애니메이션의 재생 또는 일시 정지를 설정한다.
running, paused

.box {
  animation-play-state: paused;
}
.box:hover {
  animation-play-state: running;
}

animation이 지원되지 않는 속성

모든 CSS 속성이 애니메이션을 지원하는 것은 아니다.
연속적인 중간 값을 가질 수 없는 속성은 애니메이션에 의해 부드럽게 변환될 수 없다.

이러한 속성들은 일반적으로 이진 상태 (true/false)나 단일 값으로만 존재하기 때문에 애니메이션 적용이 불가능하다.

1. display: none에서 display: block으로 변환할 수는 있지만, 중간 값이 존재하지 않기 때문에 애니메이션이 지원되지 않음. (opacity값을 대용으로 사용)

 

2. visibility: hidden에서 visibility: visible로 변환할 수는 있지만, 중간 상태가 없으므로 애니메이션이 지원되지 않음. (opacity값을 대용으로 사용)

 

3. z-index: 1에서 z-index: 10으로의 변화는 중간 값을 가지지 않기 때문에 애니메이션이 지원되지 않음. (opacity값을 대용으로 사용)

 

4. position: static에서 position: absolute로의 변화는 중간 값이 없어 애니메이션이 지원되지 않음. (left, right, top, bottom은 애니메이션 적용 가능.)

 

5. grid-column-start와 grid-column-end 속성은 이진 상태로 처리되며, 연속적인 중간 값을 가지지 않기 때문에 애니메이션이 지원되지 않음.

 

 

animation이 지원되는 속성

중간 값을 계산하여 부드러운 전환이 가능한 속성은 대부분 애니메이션을 지원한다.

 ▷opacity
요소의 투명도를 위한 속성으로 display,z-index, visibility등 애니메이션이 지원되지 않는 요소의 

숨김/표시 처리를 위해 자주 쓰인다.. opacity속성 값이 0이더라도 실제 마우스에 대한 이벤트는 적용 되기 때문에 

마우스 이벤트에서 제외 시킬 수 있는 pointer-events: none과 주로 같이 쓰인다.

.box img {
  opacity: 0; 
  transition: opacity .4s;
  pointer-events: none; /* 마우스 이벤트에서 제외 시키려면? none */
}
.box:hover img {
   opacity: 1;
}

 

color, background-color 등 색상은중간 색상 값이 계산되어 부드럽게 색이 변화한다.
그라디언트 내의 색상도 애니메이션 처리가 가능하다.