-webkit , -moz , -o-transition이 대체 뭐야?

-webkit, -moz, -o는 벤더 프리픽스입니다.

 

- 웹 브라우저의 호환성을 위해 특정 브라우저에서만 인식되는 사용되는 접두사로, 특정 브라우저에서만 동작하도록 하기 위해 사용됩니다.

- 서로 다른 웹 브라우저에서는 해당 transition을 인식하지 않을 수 있을 수 있습니다.

- 다양한 웹 브라우저의 호환성을 위해 벤더 프리픽스를 추가로 사용해야 할 수 있습니다.

 

 

-webkit-transition: 웹킷(Webkit) 기반 브라우저에서 사용되는 CSS 속성입니다. 웹킷은 Safari, Google Chrome, Opera 브라우저와 같은 일부 모던 브라우저에서 사용되는 렌더링 엔진입니다. (보통 웹킷이 많이 사용된다.)

 

-moz-transition: Mozilla Firefox에서만 인식되는 벤더 프리픽스. Mozilla Firefox웹 브라우저에서만 사용되는 CSS 속성입니다. 이 속성은 요소에 적용되는 트랜지션(전환) 효과의 속성을 설정합니다. 

 

-o-transtion: Opera 웹 브라우저에서만 인식하는 벤더 프리픽스(vendor prefix)입니다.

 

사용예시)

 -

.box {

    width: 150px;

    height: 150px;

    background: red;

    margin-top: 20px;

    margin-left: auto;

    margin-right: auto;

    -webkit-transition: background-color 2s ease-out;

    -moz-transition: background-color 2s ease-out;

    -o-transition: background-color 2s ease-out;

    transition: background-color 2s ease-out;

  }