css transition

css transition이란?

• css 속성을 변경할 때 애니메이션을 변경 하는 방법을 제공합니다.
  예를 들어 요소의 마우스가 올라갈때 배경색을 천천히 변경하고 싶을때
  아래와 같이 작성하면 된다.

p :hover{
transition: 1s color ease-in;
color: red;
}

transition: property timing-function duration delay | initial | inherit
//initial: 기본 값으로 설정
// inherit: 부모 요소의 속성값을 상속받는다.

• 위와같이 transition은 어떠한 요소를 몇초에 걸쳐서(transition-duration) 어떤 속성을 사용하고(transition-property) 진행속도(transition-timing-function)를 조절할지 정하고 사용한다

transition 상세

사용 가능한 애니메이션속성은?

• 확인하기

transition 속성 상세

• transition-property: 트랜지션을 적용해야하는 css속성의 이름 혹은 이름들을 명시한다.
  자세히 보기

• transition-duration: 트랜지션이 일어나는 지속시간을 명시한다.
  자세히 보기

• transition-timing-function: 속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다.
  자세히 보기

• transition-delay: 속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.
  자세히 보기