[TIL 05] CSS | transition, animation

트렌지션

웹요소의 스타일이 바뀌는 것을 의미
css로 애니메이션 같은 효과를 나타낼 수 있음.

• transition-property

  트렌지션을 적용할 속성을 선택하는 속성값
  • all : 모든 속성 적용(default)
  • none : 아무 속성도 바꾸지 않음
  • 속성명 : 해당하는 속성만 적용
    예) width, background, translate 등

• transition-duration

  트렌지션이 진행되는 시간을 지정하는 속성값

• transition-timing-function

  트렌지션이 진행되는 구간별로 시간을 지정하는 속성

• transition-delay

  트렌지션이 두 개 이상 있는 경우 하나의 트렌지션이 끝나고 다음 트렌지션이 시작하는 시간

• transition
  트렌지션 속성값을 한번에 지정할 수 있는 속성

선택자 {
  transition : property duration
  timing-function delay;
}

애니메이션

시작 스타일과 끝스타일을 부드럽게 이어주는 기능을 하는 것은 트렌지션과 같지만 애니메이션은 중간에 원하는 위치에서 keyframe을 이용하여 중간 스타일을 넣을 수 있다.

• @keyframes

  애니메이션의 시작지점과 끝지점의 스타일을 정하고 keyframes의 이름을
  지정한다.
  시작 지점과 끝 지점 두 개만 설정할 경우 from, to 로 설정
  중간에 작업이 있으면 %로 구분하여 설정

/* 시작과 끝 스타일만 지정할 경우 */
@keyframes 이름 {
  from{
    선택자{ 스타일 ;}
  }
  to {
    선택자 { 스타일 ; }
  }
}

/* 중간에 스타일이 있는경우 */
@keyframes 이름 {
  0%{
    선택자{ 스타일 ;}
  }
  50% {
    선택자 { 스타일 ; }
  }
  100% {
    선택자 { 스타일 ; }
  }
}

• animation-name

  요소에 적용할 애니메이션을 지정하는 속성
  keyframes에서 정한 이름을 작성

선택자 {
  animation-name : keyframes이름;
}

• animation-duration

  애니메이션의 실행시간을 지정하는 속성

• animation-direction

  요소에 적용되는 애니메이션을 반복할 때 처음부터 시작할 것인지 끝에서
  역순으로 시작할지 선택하는 속성

  • normal : 처음부터 다시 실행
  • alternate : 끝부터 다시 실행

• animation-iteration-count

  애니메이션을 얼만큼 반복할지 설정

  • 숫자 : 횟수
  • infinite : 무한반복

• animation-timing-function

  전체 속도를 지정할 수 있는 속성

• animation

  애니메이션 전체속성을 지정할 수 있는 속성

선택자 {
  animation : name duration
  timing-function delay
  iteration-count direction;
}