CSS3 속성 전환, 애니메이션, 변형

이번에는 CSS3의 속성전환, 애니메이션, 변형에 대해 알려드리겠습니다. CSS3 속성 전환, 애니메이션, 변형을 사용할 때 주의사항은 무엇인가요?

최근 회사의 요구에 부응하여 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 속성을 지원합니다.

Note: 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;

기타 비교

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

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

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

약식 비교:

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;}
}

브라우저 호환성 때문에 애니메이션 정의시 여기에도 적어야 합니다.

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

CSS에서 0.5픽셀 선 만드는 방법

Css3 전환 부드러운 전환 메뉴 표시줄 구현

위 내용은 CSS3 속성 전환, 애니메이션, 변형의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!