전환 효과 /transition 속성

​

• 전환(transition)

: css에서 한 요소에 적용된 스타일 속성을 다른 속성값으로 시간에 따라 서서히 바뀌도록 지정하는 속성.

ㄴ예를 들면 이전에 :hover 요소를 이용해서 마우스를 요소 위에 올리면 변화가 일어나는 속성도 전환에 해당된다.

​

​

​

1. transition-property 속성

ㄴ transition을 적용할 속성을 지정하는 속성

ㄴ 속성값에는 여러가지를 ,(쉼표)를 사용하여 (복수로)모두 적어 적용할 수 있다.

ㄴ none, all 과 같이 속성값 사용도 가능하다.

​

none	전환 효과 x
all	모든 속성을 전환 효과 대상으로 지정
여러 속성 지정	ex) transition-property: background-color, color, width;

​

​

2. transition-duration 속성

ㄴ 전환 효과의 지속시간을 설정하는 데 사용함.

ㄴ 속성값: 초 단위 값 (ㅡs)/(ㅡms) 사용

​

ex)

<style>

.a{

transition-property: width, background-color;

transition-duration: 4s;

}

</style>

​

3. transition-delay 속성

ㄴ이벤트가 발생하고 몇 초 기다린 후 애니메이션(전환)이 작동할 지 지정하는 속성

ㄴ 단위: 시간(초(s), 밀리 초(ms))

​

​

4. transition-timing-function 속성

ㄴ 트랜지션의 진행 속도를 지정하는 속성

속성 값

linear	처음 속도와 마지막 속도가 일정함
ease	처음에는 점점 빨라지다가 중간부터 점점 느려짐
ease-in	처음에는 속도가 느리지만 완료될 때까지 점점 빨라짐
ease-out	처음에는 속도가 빠르지만 완료될 때까지 점점 느려짐
ease-in-out	처음에는 속도가 느리지만 점점 빨라지다가 다시 점점 느려짐
cubic-beizer(p1, p2, p3, p4 )	사용자가 정의한 속도로 진행됨

- cubic-bezier ()함수로 직접 정하는 방식에는 1. 크롬 개발자 도구에서 속도 조절 2. 외부사이트 이용

이렇게 두 가지 방식이 있다.

- 아래의 웹은 속도를 설정하면 이를 함수 값으로 바꿔주는 웹사이트이다.

(https://cubic-bezier.com/#.42,0,1,1)

 

cubic-bezier(.17,.67,.83,.67) ✿ cubic-bezier.com

Preview & compare Go! Duration: 1 second Library Import Export Click on a curve to compare it with the current one. ease linear ease-in ease-out ease-in-out Tip: Right click on any library curve and select “Copy Link Address” to get a permalink to it which you can share with others

cubic-bezier.com

​

​

위에서 정리한 트랜지션 속성을 통해 요소들의 전환 속성값들을 입력해봤다.

★- 굳이 구별없이

"transition: width, 2s(transition-duration), linear(transition-timing-function);" 로

하나의 transition 안에 여러 속성값들을 나열하는 방식도 사용가능하고, 사용해보았다.

style 속성값 안에 transition 속성값들을 입력한 모습

 

​

전환 효과가 발생한 결과는 html은 요소들의 움직임/ 지속시간/ 빠르기 변환 등을 직접 확인해야 할 것 같아서

직접 html 페이지를 파일로 올려야겠다..ㅎ

 

index (3).html

0.00MB

위에 실제 html 파일을 확인해보면 지정한 transition 속성값들이 적용되어서

마우스를 올렸을 때에 여러 전환 속성들이 나타나는 모습을 확인 할 수 있다.

​

​

​

주의해야 할 것이 있다면, css의 모든 속성이 전환 효과를 사용할 수 있는 것은 아니다.

다음 css 속성들에서만 사용가능하다.

​

transition(전환)효과가 가능한 속성들

• background-color
• background-position
• border-bottom(left, right,top)-color
• border-bottom(left, right,top)-width
• border-spacing
• bottom
• clip
• color
• font-size
• font-weight
• height
• width
• left
• right
• top
• letter- spacing
• line-height
• margin-bottom(left, right, top)
• max-width
• min-width
• opacity
• outline-color
• outline-width
• padding-bottom(left, top, right)
• text-indent
• text-shadow
• vertical-align
• visibility
• word-spacing
• z-index

​

​

위의 전환 효과가 가능한 속성을 확인하고 전환 효과를 사용해야한다.

​

​

​

​