[CSS 개념잡기] CSS 변형과 전환

CSS 변형과 전환

 

1) transform

✔ transform(변형) 개요

요소에 회전, 크기 조절, 기울이기, 이동 효과 등을 부여할 수 있다.

• transform-function
  • 요소에 적용할 하나 이상의 CSS 변형 함수
  • 변형 함수는 왼쪽에서 오른쪽으로 곱해짐

✔ 크기 - scale

x, y, z축 비율 설정 가능, 원래 공간은 계속 차지함

✔ 회전 - rotate

1. angle 자료형
   • deg - degree(도)
   • turn - 바퀴
2. rotate - 각도만큼 회전 시킴
   • 음수값도 가능

✔ 이동 - translate

(0, 0)을 기준으로 얼만큼 이동시킬지 결정한다.

✔ 기울이기 - skew

deg, 다른 속성과 달리 값을 하나만 입력하면 x축에만 적용된다.

✔ 기준점 - transform-origin

기준점을 변경한다.

2) transition

✔ transition (전환) 개요

자연스럽게 CSS에 변화를 준다.

✔ transition-property, transition-duration

1. transition-property
   • 어떤 css를 변경하고 싶은지 특성 속성을 지정함
2. transition-duration
   • transition-property에 시간을 얼마나 줄 지 결정
   • time 자료형 : s, ms 단위 사용

✔ transition-delay, transition-timing-function

1. transition-delay
   • transition 요청을 받은 후 실제로 실행까지 기다려야하는 시간을 지정
   • 텀이 생김
2. transition-timing-function
   • transition 되는 중간 과정의 시간
   • ease(defalut), ease-in-out, linear, cubic-bezier()... 등 지정

✔ transition (shorthand)

순서가 매우 중요하다.

• 시간과 관련된 값이 첫 번째에 위치하면 transition-duration으로 적용, 두 번째에 위치하면 transition-delay로 적용됨
• 맨 앞에는 되도록 transition-property를 적어줄 것
• transition, transform을 활용 해 다양한 애니메이션 효과를 줄 수 있음

3) animation

✔ 애니메이션 개요

다수의 스타일을 전환하는 애니메이션을 적용한다.

✔ @keyframes

@규칙은 애니메이션 중간중간 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있다.

.box {
  animation: first-animation 2s infinite;
}
@keyframs first-animation {
  0% {}
  100% {}
}

• 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있음
• animation-name 속성에서 사용할 이름과 키프레임 리스트를 매칭시킴

✔ animation-name, animation-duration

1. animation-name
   • transition property에 대응
   • keyframs의 이름
   • 기본값 : none
   • 대소문자를 구분함, 0~9까지 사용, 언더바(_), 대쉬(-) 사용가능
   • 상속되지 않도록 별도 작성하는 것을 권장
2. animation-duration
   • 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정
   • s, ms 단위 사용. 음수값은 허용하지 않음

✔ animation-delay, animation-timing-function

1. animation-duration
   • 애니메이션이 시작할 시점을 지정한다.
   • 시작될 요소가 적용되는 순간부터의 시간 오프셋
   • 양수 값 : 지정된 시간이 경과 후 애니메이션이 시작
   • 음수 값 : 애니메이션이 즉시 시작되나 주기 도중에 시작
2. animation-timing-function
   • 각 사이클의 진행 방법을 설정함
   • ease, linear, ease-in, out...등 지정

✔ animation-iteration-count, animation-direction

1. animation-iteration-count
   • 반복 횟수
   • default : 1, 소숫점도 가능
2. animation-direction
   • 애니메이션이 앞, 뒤 또는 앞뒤로 번갈아 재생 되어야하는지 여부를 결정
   • reverse : 역방향 재생
   • alternate : 사이클마다 각 주기를 뒤집음
   • alternate-reverse : 첫 번째 반복을 역방향으로 시작

✔ animation-paly-state

• running : 애니메이션이 계속 재생되게 함(default)
• pausing : 애니메이션이 일시 정지 되게 함

✔ animation-fill-mode

애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정한다.

• none(default) : 실행되지 않을 때 대상에 스타일을 적용하지 않음
• forwards : 실행 된 애니메이션의 마지막 keyframe에 의해 설정된 계산 값을 유지함
• backwards : 적용되는 즉시 첫 번째 관련 keyframe에 정의 된 값을 적용함
• both : 양방향으로 적용
  1. 기존 스타일
  2. keyframes
  3. animation 실행ing
  4. keryframes의 마지막 style
  5. 기존 스타일
• 애니메이션에 적용되는 5가지 style

✔ animation (shorthand)

8가지의 property가 있다.

animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running