CSS(SCSS) - 전환(transition)

1. CSS(SCSS) - 전환효과

1) transition

• 요소의 전환(시작과 끝) 효과를 지정해주는 단축 속성을 말한다.
  (다만, 단축형으로 작성할땐 필수로 포함되어야 할 속성이다!)

transition 속성 종류)

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

2) transition-property

• 전환 효과를 사용할 속성 이름을 지정해주는 속성이다.

all : 모든 속성에 적용하며 기본값으로 사용된다
속성이름 : 전환 효과를 사용할 속성 이름 명시

코드 예)

div {
width: 100px;
height: 100px;
background-color: orange;
transition: width 0.5s;
}

div:active {
width: 300px;
background-color: royalblue;
}

3) transition-duration

• 전환 효과의 지속시간을 지정하는 속성이다.

0s : 전환 효과가 적용되지 않으며 기본값으로 부여된다
시간 : 지속시간을 지정 (예 : 1s)

코드 예)

div {
width: 100px;
height: 100px;
background-color: orange;
transition: width 0.5s, background=color 2s;
}

div:active {
width: 300px;
background-color: royalblue;
}

4) transition-timing-function

• 전환 효과의 타이밍 함수를 지정하는 속성이다.

ease : 느리게 - 빠르게 - 느리게
linear : 일정하게
ease-in : 느리게 - 빠르게
ease-out : 빠르게 - 느리게
ease-in-out : 느리게 - 빠르게 - 느리게

5) transition-delay

• 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정하는 속성이다.

0s : 대기시간 없으며 기본값으로 설정되어 있 다
시간 : 대기시간을 지정