#TIL19

전환

• 선택자가 변화되거나 혹은 동작이 있을때 시간의 흐름을 부여하여 변화시키는 속성

transition

• 요소의 전환(시작과 끝)효과를 지정하는 단축속성
• transition: 속성명 지속시간 타이밍함수 대기시간;
  = transition: transition-property transition-duration transition-timing-function transition-delay
• 단축형으로 작성할 때, 지속시간(transition-duration)은 필수 포함

transition-property

• 전환효과를 사용할 속성 이름 지정
• 값: all(기본값 - 모든 속성에 적용), 속성이름(전환 효과를 사용할 속성 이름 명시)

transition-duration

• 전환효과의 지속시간을 지정
• 값: 0s(기본값 - 전환 효과 없음), 시간(지속시간을 지정)

transition-timing-function

• 전환효과의 타이밍(Easing)함수를 지정
• 값: ease(기본값, 느리게 - 빠르게 - 느리게), linear(일정하게), ease-in(느리게 - 빠르게), ease-out(빠르게, 느리게), ease-in-out(느리게 - 빠르게 - 느리게)

transition-delay

• 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정
• 값: 0s(기본값 - 대기시간 없음), 시간(대기시간을 지정)

transition과 함께 사용가능한 속성

• 사이즈관련 - width, height, margin, padding

• 선관련 - border-width, border-color, border-radius

• 색상관련 - color, background-color, opacity

• 변환관련 - transform

• 위치관련 - top, left, right, bottom

  ---

애니메이션

• 동적인 다양한 스타일 전환을 표현하기 위해 사용하는 속성(부드럽게 스타일 변화)

@keyframes

• animation은 별도의 이름을 가진 keyframe을 생성시켜 프레임 구간별로 다른 속성을 적용함
• ex)
  @keyframes 애니메이션이름 {
  from, 0% { 시작스타일을 표기 }
  to, 100% { 끝스타일을 표기 }
  }

animation-name

• 애니메이션(keyframes) 이름 지정

animation-delay

• 애니메이션 효과에 대한 지연시간 지정

animation-direction

• 애니메이션 동작이 시작되는 뱡향 설정
• 값: normal(기본값 - 시작~끝), reverse(역방향 움직임), alternate(from<->to 반복), alternate-reverse(역방향 움직인 후 정방향 움직임)

animation-duration

• 애니메이션 실행 시간 지정
• ex) 1s -> 1초

animation-iteration-count

• 애니메이션 효과의 반복 횟수
• 값: 숫자값(횟수반복), infinite(무한반복)

animation-timing-function

• 가속도 형태
• 값: ease(기본값, 느리게 - 빠르게 - 느리게), linear(일정하게), ease-in(느리게 - 빠르게), ease-out(빠르게, 느리게), ease-in-out(느리게 - 빠르게 - 느리게)

animation-fill-mode

• 애니메이션 미실행 시(종료 또는 대기) 요소의 스타일 지정
• 값: none(기본값), forwards, backwards, both

animation-play-state

• 애니메이션 효과의 재생상태(재생 또는 중지)를 지정
• 값: running(재생), paused(중지)