19.12.05 개발 기록 - CSS transition

어제 얘기했던 CSS의 transition에 대해서 포스팅한다.

transition을 사용해본 결과, 개인적으로

transition은 화면의 전환이나, 어떤 div등이 움직이거나 변형이 일어날 때

부드러운 효과를 주기 위한 것으로 이해가 되었다 !

  $("#one").css({
            "-moz-transition": "all 0.75s ease-in-out",
            "-o-transition": "all 0.75s ease-in-out",
            "-webkit-transition": "all 0.75s ease-in-out",
            "-ms-transition": "all 0.75s ease-in-out",
            "transition": "all 0.75s ease-in-out",
        });

위 코드를 보면, 'one' 이라는 id를 가진 친구가 어떠한 이벤트에 의해 변형이 일어나게 될 때

(나의 경우는 메인 화면의 배경사진과 글씨들이 자연스럽게 사라지고, 다음 화면이 자연스럽게 스르륵~ 나타나게 되는 효과를 주었다.)

부드러운 전환 효과를 주기 위해서 transition을 이용하게 되었다.

transition 앞에

'-moz-'

'-o-'

'-webkit-'

'-ms'

와 같은 접두어들은 각기 다른 브라우저에 사용하기 위한 접두어라고 한다. (어떤 접두어가 어떤 브라우저와 매칭 되는지는 나중에 확인해보도록 한다 !)

사용 중에 도움이 필요한 부분을 폭풍 구글링하던 중 transition은 Internet Explorer10 미만의 버전을 지원하지 않는다는 것을 알게되었다. - 나는 내 맥북의 Internet Explorer11에서도 transition을 구현하는 데 결국엔 실패하였다......

transition : 1 2 3 4 --> 이와 같이 총 4가지 속성을 줄 수 있는데,

1 : 어떤 속성에 transition 효과를 줄 지,

2 : 효과가 몇초에 걸쳐 일어나는 지,

3 : 효과가 일어나는 속도

4 : 효과가 몇초후에 일어날 지

를 결정하는 속성이다.

나 같은 경우는 transition : all 0.75s ease-in-out 을 줬는데,

1. all : 모든 속성이 transition 효과를 얻는다.
2. 0.75s : transition 효과가 0.75초에 걸쳐 일어난다.
3. ease-in-out : transition이 일어나는 시작과 종료를 천천히 진행한다.

이다. 4번 째 속성(delay)를 주지 않아서 이벤트가 발생하면 바로 transition이 일어나도록 설정했다.

 

이 포스팅을 보시는 분 중 제가 틀린 부분, 잘못 이해한 부분이 있어 알려주실만한 내용이 있다면 언제든 편하게 댓글 남겨주세요 :) 감사합니다 !