[CSS] transition (간단한 애니메이션)

• transition-property (움직임 속성)
• transition-duration (움직임 진행 시간)
• transition-delay (움직임 시작 지연)
• transition-timing-function (움직임의 스타일 정의 - 서서히 시작, 서서히 종료 등 )
  • linear : 일정한 속도로 진행
  • ease : 기본값. 서서히 시작, 서서히 감소 (부드러운 움직임)
  • ease-in : 서서히 시작 빠르게 종료
  • ease-out : 빠르게 시작 서서히 종료
  • ease-in-out : 서서히 시작 빠르게 진행 서서히 종료
  • cubic-bezier() : 사용자 정의 움직임.
  • https://cubic-bezier.com/ 사이트 참고

transition 축약형

값의 순서와 상관없이 작성 가능. 첫번째 숫자는 진행 시간(duration), 두번째 숫자는 대기 시간(delay)

transition: all 1s 0.5s cubic-bezier(.49,.06,.08,1);
/* 모든 요소의 변화를 0.5초 기다렸다가 1초 동안 사용자 정의 움직임에 따라 진행. */

transition-property: all, transition-timing-function: ease 처럼 기본값으로 두고 싶으면 생략 가능.

transition: 1s;
/* 모든 변화를 1초 동안 딜레이 없이 ease의 속도로 진행. */