CSS3의 강력한 기능 중 하나는 부드럽게 전환되는 효과, 다시 말해 페이드 효과를 표현할 수 있다는 것입니다. 불투명도에 변화를 주거나 배경이 움직일 때에 간단한 페이드 효과를 표현할 수 있습니다.
5개의 대표 브라우저 모두가 이 속성을 지원합니다. 단 Internet Explorer같은 경우 버전 10 이상이여야 하며 Opera같은 경우 이 속성이 제대로 작동되지 않는 버그가 있습니다. 아직 제정되지 않은 기술이므로 속성 앞에 브라우저의 특성을 입력해야 합니다. 브라우저의 특성을 입력하는 방법을 모르신다면 CSS3 가이드북 페이지에서 브라우저의 특성 링크를 클릭하세요.
transition 속성은 어떠한 엘리먼트에 변화가 생겼을 때 페이드 효과를 표현하게 해 줍니다. 커서를 올렸을 때, 엘리먼트에 어떠한 행동이 이뤄졌을 때에 효과가 발생합니다. 값에는 transition 속성의 효과가 이뤄지는 시간을 입력합니다. 시간의 단위는 초입니다. 시간과 함께 transition 속성의 효과를 추가로 입력할 수도 있는데 효과의 종류는 ease, ease-in, ease-out, ease-in-out, linear으로 총 5가지의 효과가 있습니다. 효과를 추가로 입력하지 않았을 때 기본으로 설정되는 효과는 ease입니다. 또한 transition이 적용될 속성을 따로 지정할 수도 있습니다.
transition 속성의 효과를 잠깐 지연시킬 수도 있습니다. transition-delay란 속성을 사용하면 되는데 속성을 입력한 후 지연 시간을 입력하면 transition 속성의 효과가 표현되기 전에 정해진 시간동안 지연됩니다.
5개의 대표 브라우저 모두가 이 속성을 지원합니다. 단 Internet Explorer같은 경우 버전 10 이상이여야 하며 Opera같은 경우 이 속성이 제대로 작동되지 않는 버그가 있습니다. 아직 제정되지 않은 기술이므로 속성 앞에 브라우저의 특성을 입력해야 합니다. 브라우저의 특성을 입력하는 방법을 모르신다면 CSS3 가이드북 페이지에서 브라우저의 특성 링크를 클릭하세요.
transition 속성은 어떠한 엘리먼트에 변화가 생겼을 때 페이드 효과를 표현하게 해 줍니다. 커서를 올렸을 때, 엘리먼트에 어떠한 행동이 이뤄졌을 때에 효과가 발생합니다. 값에는 transition 속성의 효과가 이뤄지는 시간을 입력합니다. 시간의 단위는 초입니다. 시간과 함께 transition 속성의 효과를 추가로 입력할 수도 있는데 효과의 종류는 ease, ease-in, ease-out, ease-in-out, linear으로 총 5가지의 효과가 있습니다. 효과를 추가로 입력하지 않았을 때 기본으로 설정되는 효과는 ease입니다. 또한 transition이 적용될 속성을 따로 지정할 수도 있습니다.
.example-a {
position: absolute;
width: 225px;
height: 90px;
background: url(image.png) no-repeat #696969;
opacity: 0.8;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}width: 225px;
height: 90px;
background: url(image.png) no-repeat #696969;
opacity: 0.8;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition 속성의 효과를 잠깐 지연시킬 수도 있습니다. transition-delay란 속성을 사용하면 되는데 속성을 입력한 후 지연 시간을 입력하면 transition 속성의 효과가 표현되기 전에 정해진 시간동안 지연됩니다.
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
코멘트 0
