집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3 애니메이션 관련 속성 전환, 애니메이션, 변형의 종합 비교

CSS3 애니메이션 관련 속성 전환, 애니메이션, 변형의 종합 비교

小云云원래의: 2017-12-12 09:39:321786검색

전환, 애니메이션, 변형이 불명확할 때가 있습니다. 이 글에서는 애니메이션과 관련된 CSS3 속성 전환, 애니메이션, 변형의 비교를 주로 소개하고, 브라우저 호환성, 사용법, 비교를 통해 서로의 유사점과 차이점을 더욱 깊이 보여줍니다. , 자세한 작업 단계는 아래에서 확인하실 수 있습니다. 관심 있는 친구가 도움이 되기를 바랍니다.

브라우저 호환성

CSS3 변환 속성

Internet Explorer 10, Firefox 및 Opera는 변환 속성을 지원합니다.

Internet Explorer 9는 대체 -ms-transform 속성을 지원합니다(2D 변환에만 해당).

Safari와 Chrome은 대체 -webkit-transform 속성(3D 및 2D 변환)을 지원합니다.

Opera는 2D 변환만 지원합니다.

transform:rotate(7deg);
-ms-transform:rotate(7deg);     /* IE 9 */
-moz-transform:rotate(7deg);     /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg);     /* Opera */

CSS3 애니메이션 속성

Internet Explorer 10, Firefox 및 Opera는 애니메이션 속성을 지원합니다.

Safari와 Chrome은 대체 -webkit-animation 속성을 지원합니다.

참고: Internet Explorer 9 이하 버전은 애니메이션 속성을 지원하지 않습니다.

사용법:

animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */

CSS3 전환 속성

Internet Explorer 10, Firefox, Opera 및 Chrome은 전환 속성을 지원합니다.

Safari는 대체 -webkit-transition 속성을 지원합니다.

참고: Internet Explorer 9 및 이전 브라우저는 전환 속성을 지원하지 않습니다.

사용법:

transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s;

기타 비교

전환과 애니메이션은 애니메이션 속성이고 변환은 정적 속성입니다.
영어 단어의 이해에 따르면 변환, 변환, 변환은 주로 변위, 크기, 위치, 모양의 변환을 의미합니다. 변환 속성을 직접 쓰면 변환된 모양과 위치가 나옵니다.
전환과 애니메이션은 모두 애니메이션 속성이므로 둘 다 다음과 같은
property
duration
timing-function
delay

property, 애니메이션 시간, 애니메이션 형식, 지연 시간을 갖습니다. 애니메이션의 경우 속성은 애니메이션의 이름이 됩니다. 애니메이션 고유의 속성은 다음과 같습니다.

animation-iteration-count
animation-direction
하나는 애니메이션이 재생되는 횟수를 정의하는 것이고, 다른 하나는 애니메이션이 차례로 역방향으로 재생되는지 정의하는 것입니다.

약식 비교:

transition 속성: 전환, 즉 CSS 변경 프로세스의 전환이므로 전환 속성을 정의한다는 의미는 정의된 전환 속성이 변경되면 다음에 따라 변환된다는 것입니다. 애니메이션에 좋은 방법을 제공하는 엄격한 직접 변환 대신 이 전환 애니메이션을 사용합니다. 일반적으로 다음과 같이 작성합니다.
-webkit-transition: 모두 0.85초 easy-in 0.1초;
-o-transition: 모두 0.85초 easy-in 0.1초; 전환:all 0.85seasing-in 0.1s;
all은 속성의 모든 변경 사항이 이 전환
애니메이션 작성 방법에 따라 변경됨을 의미합니다.
-webkit-animation: tang1 0.5seasing 0s Infinite Alternative;
animation: tang1 0.5 s 완화 0s 무한 대체;
약식 형식, 애니메이션 뒤에는 애니메이션 수와 역방향 재생 여부가 표시됩니다.

애니메이션은 애니메이션 이름으로 시작하므로 여기서 먼저 애니메이션이 어떻게 변환되는지 정의해야 합니다.

@keyframes tang1
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes tang1 /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}

브라우저는 Sex를 지원하기 때문에 애니메이션 정의 시에도 이 점을 언급해야 합니다.

from은 0% 시간을 나타내고 to는 100% 시간을 나타냅니다.

CSS3 애니메이션 관련 속성 전환, 애니메이션, 변형의 종합 비교

관련 기사