UIUX 디자이너, 프론트엔드 학습_CSS 트렌지션

이번 장에서는 css의 트렌지션에 대해 학습한 내용을 적어보려 한다.

---

전환

• transition
  • 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성
  • 지속 시간이 필수로 포함되어야 한다.
• transition-property
  • 전환 효과를 사용할 속성 이름을 지정
  • all : 모든 속성에 적용
  • 속성 이름 : 전환 효과를 사용할 속성 이름 명시
    • 가로 너비만 적용하고 싶으면 width만 넣으면 가로 값에만 트렌지션 적용
• transition-duration
  • 전환 효과의 지속 시간을 지정
  • 0s : 전환 효과 없음
  • 시간 : 지속시간(s)을 지정

줄바꿈을 통해 클린한 코드 창 구성 가능

• transition-timing-function
  • 전환 효과의 타이밍(easing) 함수를 지정
  • - https://easings.net/
    - https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function
    - https://gsap.com/docs/v3/Eases/
    사이트 참고
• transition-delay
  • 전환 효과가 몇 초 뒤에 시작할지 대기 시간을 지정
  • 0s : 대기 시간 없음
  • 시간 : 대기 시간(s) 부여

 

변환

• transform
  • 원근법, 이동, 크기, 회전, 기울임을 부여 가능

• perspective
  • 하위 요소를 관찰하는 원근 거리를 지정
  • 함수가 아닌 속성
    • 속성이 적용되는 것은 관찰 대상의 부모의 적용된다.
    • 함수가 적용되는 것은 관찰 대상에 적용된다.

원근법 perspective는 제일 앞에 작성 되어야 한다.

• backface-visibillty
  • 3d 변환으로 회전된 요소의 뒷면 숨김 여부
  • visible : 뒷면 보임(디폴트)
  • hidden : 뒷면 숨김