CSS3 전환은 무엇을합니까?

나는 주위에이 코드를 우연히 발견 :CSS3 전환은 무엇을합니까?

-webkit-transition: all 0.1s ease-in; 
-moz-webkit-transition: all 0.1s ease-in;

이 무엇을합니까? 누군가 더 설명해 주실 수 있습니까, w3schools 및 MDN의 샘플을 이해하지 못합니다. 정말 고마워요

출처

2016-07-13 glendon philipp baculio

It 0.1 초의 시간 스케일과 "ease-in"의 여유 곡선을 사용하여 애니메이션 가능한 모든 속성을 전환합니다. 변경할 수있는 모든 애니메이션 속성은 이러한 규칙에 따라 변경됩니다. – evolutionxbox

이 링크를 확인하십시오 https://css-tricks.com/almanac/properties/t/transition/ 설명과 실제 예제는 쉽게 따라 할 수 있습니다. – StaticBeagle

은 전이는 CSS 레이아웃 "는 다른 레이아웃으로 전환"CSS 속성이

으로 전환 효과를 적용

-webkit-transition: all 0.1s ease-in;

모든 설명하는 첫 번째 요소를 내려

침입 방법을 설명

전환 속성 CSS 속성은 전환 효과를 적용해야하는 CSS 속성의 이름을 지정하는 데 사용됩니다. 0.1 초mdn transition property

는

그래서 -webkit-transition: all 0.1s ease-in; 이 모든 CSS 속성에 대해 나는 0.01 초 전환을 원하는 말하는 편의성에은 전환의 유형을 설명

기간을 설명합니다 완화 모드를 사용하는 시간 MDN

출처

2016-07-13 20:51:47 gh9

고마워요. 첫 번째로 보지 못했습니다. –

@glendonphilippbaculio 불분명 한 부분이 있습니다. (이 방법으로 다른 사람들에게 더 좋은 답변을 줄 수 있습니다.) – gh9

샘플의 구문은 {transition-property : width; 전환 기간 : 2s; transition-timing-function : linear; 전환 지연 : 1s; } –

CSS3 전환은 기본적으로 DOM의 요소가 움직이는 경우입니다.

예를 들어 사각형 div를 회전합니다. 요소를 확대하거나 늘릴 수 있습니다.

출처

2016-07-13 20:47:37 Catto

정확합니까? 배경색을 변경하면 어떻게됩니까? 그것은 그때 움직이지 않을 것이고 DOM과 관련이 없다. – evolutionxbox

색상 변경은 전환으로 간주되지 않습니다. 예를 들어, http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1이 수수께끼를 확인하고 빨간색 squre 위에 마우스를 올리면 & strech됩니다. 이것은 전환의 예입니다. 희망이 도움이! – Catto

이 예제는 너비 속성 만 전환합니다 ... 물론 색상을 전환 할 수 있습니다. --- 증거 (http://leaverou.github.io/animatable/) – evolutionxbox

CSS3 전환은 무엇을합니까?

답변

관련 문제