[TIL] CSS 3: Transitions

Transition

값이 일정 시간에 걸쳐 일어나도록 하는 것.

주로 javasacript로 구현한다.

1. 마우스오버할 때 주황색으로 변함

  li:hover{
       background-color: #ffc200;
       }

2. Transition 속성

• transition-property 변형되는 속성
• trainsition-duration: 몇 초 동안 변형될 지 설정한다.
• trainsition-delay: 몇 초 후에 재생될 지 설정한다.

{transition-property: width;
transition-duration: 750ms; 
transition-delay: 250ms;}

3. 타이밍 기능

• ease-in 느리게 시작한 후 빨라진다.
• ease-out 일정하게 빨라지다가 점점 느려지면서 종료한다.
• ease-in-out 일정하게 빨라지다가 점점 느려지면서 종료한다.
• linear 일정하게 빨라진다.

{transition-timing-function: ease-out}

4. 한 줄로 작성하기

{transition: width 750 ease-out 250m;}