CSS3의 변환, 전환 및 애니메이션의 세 가지 속성 간의 차이점에 대한 자세한 설명

최근 내 프로젝트에서 CSS3의 애니메이션 속성을 사용했습니다. 종종 쉽게 혼동됩니다. 그래서 도움이 필요한 친구들이 참고하고 배울 수 있도록 인터넷에서 몇 가지 정보를 확인하고 요약했습니다.

Transform
일부 테스트 사례에서는 변환 속성이 ​​시연될 때마다 애니메이션이 적용되는 것 같습니다. 이는 직관적 사고를 가진 소수의 사람들이 변형 속성을 애니메이션 속성으로 생각하게 만듭니다. 반대로 변환 속성은 정적 속성입니다. 일단 스타일에 작성되면 해당 효과는 변경 프로세스 없이 직접 표시됩니다. 변형의 주된 목적은 디자이너에게 낯설지 않은 요소의 특별한 변형을 만드는 것입니다. 쉽게 말하면 CSS 그래픽 변형 도구입니다.

그래픽 변형의 기본 조건 중 원점 설정에 대해서는 CSS에서 정의하기 위해 transform-origin을 사용합니다. 이 정의의 원점은 CSS의 영향을 받는 요소의 왼쪽 상단에서 0,0으로 계산되어야 합니다. 다른 속성은 이 속성을 기반으로 계산됩니다.

그래픽 변경 모드는 CSS3 표준에서 변환 스타일로 정의됩니다. 기본값은 단순 효과를 표시하는 플랫입니다. 그리고 Preserve-3D는 공간을 3D 모드로 렌더링합니다. 일반적인 생각으로는 Preserve-3d만 있으면 되는데, "preserve-3d를 켜면 GPU 가속이 사용된다"는 소문으로 미루어 볼 때 이 속성은 시스템 소모를 줄이는 데 사용될 수도 있습니다. 결국 2d보다 3d가 낫습니다. . 또 다른 차원의 계산이 필요합니다.

3D 모드를 사용해야 하는 경우 먼저 스타일을 3D로 지정하고 상위 요소에 Perspective 및 Perspective-Origin을 추가하여 원근점을 지정해야 합니다.

디자이너가 요소 스타일을 변경하는 데 사용하는 특정 속성은 다음과 같습니다.

1. 번역3d(x,y,z)는 페이지의 세 축에서 요소의 위치를 ​​제어하는 ​​데 사용됩니다.
2, 회전(deg); )는 요소의 회전 각도를 제어하는 ​​데 사용됩니다.
3. 기울이기[x,y](deg) 이 속성은 기울기를 만드는 데 사용됩니다. 2D의 3D 관점;
4. scale3d(x,y,z)는 확대 및 축소에 사용되며 속성은 비율입니다.
5. Matrix3d, CSS 매트릭스. 이 매트릭스 속성을 통해 위의 속성값을 모두 커버하지만, 개인적으로 가독성이 굉장히 떨어지는 느낌이고(모두 숫자와 단위라서 기억하기 좀 흐릿함) 현재로서는 추천할 이유가 없습니다. 그것의 사용.

일반적으로 CSS Transform의 속성은 동적, 정적 관점에서 원래 사용되는 left, right, top, Bottom 속성과 차이가 없습니다. 따라서, Transform을 사용할 때에는 이런 유형의 static으로 분류해야 합니다. 위치 변형에 대한 속성.

Transition
전환 속성은 간단한 애니메이션 속성으로 매우 간단하고 사용하기 쉽습니다. 일반적으로 간단한 웹페이지 특수효과에 사용되는 애니메이션의 단순화된 버전이라고 할 수 있습니다. 예를 들어, 다음과 같은 두 가지 스타일이 있습니다.

코드는 다음과 같습니다.

.position{
    left:100px;
    top:100px;
}
.animate{
    -webkit-transition:left 0.5s ease-out;
    left:500px;
    top:500px;
}

animate의 전환 속성은 왼쪽 속성이 변경되면 애니메이션 효과를 수행합니다(왼쪽 속성 변경에만 기반함, 다른 속성은 애니메이션 변경 사항에는 추가되지 않습니다.)

우선 요소의 CSS는 위치입니다. cssList에 animate를 추가하거나 위치를 animate로 바꾸면 요소의 속성이 변경되고 webkit-transition이 트리거됩니다. 지정된 속성이 변경되기 전의 값은 시작 값이고 변경 후의 속성은 종료 값입니다. 애니메이션 효과가 실행됩니다. 이는 간단한 2점 변경 프로세스로 애니메이션 속성의 복잡성을 크게 단순화합니다.

동시에 전환 애니메이션 중에 속성 값에 새로운 변경이 있으면 현재 애니메이션 실행이 중단되고, 중단된 시점의 속성 값이 새 애니메이션에 시작 값으로 제공됩니다. 새로운 애니메이션 효과를 계산합니다.

CSS 작성 시 변경되는 속성은 변형뿐이므로 전환 속성에 응답 속성을 모두로 지정하여 해당 요소의 모든 속성(애니메이션 가능한 속성)에 대해 응답하고 애니메이션 변경을 실행할 수 있습니다.

Animation
공식 소개에서 소개된 이 속성은 전환 속성의 확장입니다. 하지만 이 간단한 소개에는 간단하지 않은 키프레임이 포함되어 있습니다.

플래시 애니메이션을 해본 사람이라면 플래시에 타임라인과 키프레임이라는 두 가지 기본 무기가 있다는 것을 알 것입니다. CSS 키프레임의 출현은 플래시 세계에서 이 두 가지 속성의 모음을 제공합니다. 키프레임의 간단한 예를 살펴보세요.

코드는 다음과 같습니다.

@keyframes 'wobble'{
  0%{
   left:100px
}
   30%{
   left:300px;
}
  100%{
   left:500px;
}
}
.animate{
 left:100px;
   -webkit-animation:wobble 0.5s ease-out;
   -webkit-animation-fill-mode:backwards;
}

上面这个代码展示了一个keyframes 'wobble'，其中 0％ 代表在变化中不同时间点的属性值，你可以较精确的控制动画变化中任何一个时间点的属性效果。而animation则根据这个keyframes提供的属性变化方式去计算元素动画当中的属性。与 transition 不同的是，keyframes提供更多的控制，尤其是时间轴的控制，这点让css animation更加强大，使得flash的部分动画效果可以由css直接控制完成，而这一切，仅仅只需要几行代码，也因此诞生了大量（比起flash来说算是大量了）基于css的animation tools，用来取代flash的动画部分。关于动画工具，可以参考Web standards-based Animation Tools.

另外在animation属性里面还有一个最重要的就是：animation-fill-mode，这个属性标示是以(from/0%)指定的样式 还是以(to/100%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式，保证动画的整体连贯。

위 내용은 CSS3의 변환, 전환 및 애니메이션의 세 가지 속성 간의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!