[CSS] transition 속성과 사용법

🎯 transition 속성과 사용법

• 특정 조건 하에서 애니메이션이 동작되는 과정을 보여주고자 할 때 사용
• 전환이 일어날 요소들을 작성해주는 것!

 

📝 transition 속성

• transition-property : 효과를 적용하고자 하는 css 프로퍼티를 지정. 즉, 과정을 보고 싶은 속성을 지정
  • 기본값 : all
  • 복수의 프로퍼티를 지정하는 경우 쉼표(,)로 구분한다.
    • transition-property: width height;
  • 전환 수치를 다르게 하려면?
    • transition: width 1s, height 2s
• transition-duration : 효과가 나타나는데 걸리는 시간
  • 기본값 : 0s
• transition-timing-function : 트랜지션 효과의 속도
  • 기본값 : ease, 느리게 시작하여 점점 빨라졌다 느려지면서 종료
  • linear : 시작부터 종료까지 일정하게
  • ease-in : 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 서서히
  • ease-out : 빠르게 시작해서 점점 느려짐
  • ease-in-out : 느리게 시작하여 빨라지다가 느려지면서 종료
  • 어떤 효과를 선택하든 duration 시간에 영향을 끼치지 않는다.
• transition-delay : 특정 조건 하에서 효과 발동
  • 기본값 : 0s
  • 초 단위(s) 또는 밀리 초 단위(ms)로 지정

transition: property duration function delay

transition-property: font-size;
transition-duration: 4s;
transition-timing-function: ease-out;
transition-delay: 3s;

• transition의 속성 값들을 한 줄로 작성할 때, 나머지 속성 값의 순서는 상관없지만 항상 duration이 먼저, delay가 나중에 작성되어야 한다.

 

📝 :hover

• 사용자의 마우스 커서가 링크 위에 올라가 있는 상태

 

📌 참고

• CSS3 Transition - poiemaweb
• 동적 의사 클래스 - tcpschool
• 링크 꾸미기 - 생활코딩