CSS3 변환, 전환 및 애니메이션 속성 요약-HTML 튜토리얼-php.cn

변환 및 애니메이션 🎜>과 관련된 세 가지 CSS3 속성:

Transform

브라우저 지원:

Internet Explorer 10, Firefox, Opera 지원 변환 속성 .

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

Safari 및

Chr대체 -webkit-transform 속성을 지원합니다. 및 2D 변환) Opera는 2D 변환만 지원합니다.

2D 변환 변환 방법 >

함수 설명 translate(x, y) X축과 Y축을 따라 요소를 이동하는 2D 변환 정의 rotate(angle) 2D 회전 정의 매개변수에 각도를 지정합니다. scale(x,y ) 요소의 너비와 높이를 변경하는 2D 스케일링 변환 정의 skew(x-angle,y-angle) X 및 Y축을 따라 2D 기울기 변환 정의 matrix(n,n,n,n,n,n) 6개 값의 행렬을 사용하여 2D 변환 정의

translate(x, y) 메소드는 왼쪽(X축) 위치와 위쪽(Y축) 위치에 지정된 매개변수에 따라 현재 요소 위치에서 이동합니다. x와 y의 값은 양수 또는 음수일 수 있으며, 이는 각각 서로 다른 방향의 오프셋을 나타냅니다.
rotate(angle) 메소드는 회전 각도를 나타냅니다. 각도가 양수이면 요소는 시계 방향으로 회전하고, 음수이면 요소는 시계 반대 방향으로 회전합니다.
x축과 y축 요소의 크기 조정 비율을 나타내는 scale(x, y) 메서드. 매개변수가 1보다 크면 요소가 확대됩니다. 1보다 작으면 요소가 감소합니다.
요소를 왜곡하는 데 사용되는 Skew(x-angle,y-angle) 방법입니다. 첫 번째 매개변수는 수평 왜곡 각도이고 두 번째 매개변수는 수직 방향입니다. 두 번째 매개변수는 선택적 매개변수로, 두 번째 매개변수가 설정되지 않은 경우 Y축은 0deg
matrix(n,n,n,n,n,n) 방식으로 지정됩니다. 6개의 값을 포함하는 변환 행렬 형태의 2D 변환 이 속성 값은 수학과 관련된 행렬

transform-origin

앞서 언급한 변환 방법은 모두 요소의 중심을 기준으로 변환합니다. 즉, 요소 변환의 기준점은 기본적으로 요소의 중심이 됩니다. 그러나 때로는 서로 다른 위치의 요소에 대해 이러한 작업을 수행해야 하는 경우 변형 원본을 사용하여 요소의 기본 위치를 변경할 수 있습니다. 이 속성은 세 가지 매개변수를 받을 수 있습니다:

transform-origin: x-axis y-axis z-axis;

x축, 이는 수평 방향 값을 나타냅니다. 문자 매개변수 값은 왼쪽, 가운데

을 취할 수도 있고, 문자 매개변수 값의 해당 백분율 값은 left=0% center=50%;
y축은 세로 방향의 값을 나타내며, 문자 값
, center,
bottom 또는 문자 값을 설정할 수도 있습니다. 문자 매개변수 값의 해당 백분율 값은 위쪽=0%, 아래쪽=100%입니다.
z축.
가 Z축에서 배치되는 위치를 나타내며 3D 변형에 사용됩니다.

Internet Explorer 10 및 Firefox는 3D 변환을 지원합니다. Chrome 및 Safari는 접두사 -webkit-을 추가해야 합니다. .

Opera는 아직 3D 변환을 지원하지 않습니다(2D 변환은 지원됨).

3D 변환은 2D 변환을 기반으로 하는 동일한 속성을 사용합니다. CSS3의
3D 변환

에는 주로 다음과 같은 기능 함수가 포함됩니다.

3D 변위: CSS3의 3D 변위에는 주로 TranslateZ() 및 Translate3d() 기능 기능이 포함됩니다. >

3D 회전: CSS3의 3D 회전은 주로 네 가지 기능 함수(rotateX(),rotateY(),rotateZ(),rotate3d())를 포함합니다.
3D 스케일링: CSS3의 3D 스케일링에는 주로 scaleZ() 및 scale3d()라는 두 가지 기능이 포함되어 있습니다.
3D 매트릭스: CSS3의 3D 변형 중화 2D 변형에는 3D 매트릭스 기능도 있습니다. 매트릭스3d().
에는 다음과 같은 변환 속성도 있습니다.

transform-style: 중첩된 요소가 3D 공간에 표시되는 방식을 지정합니다.

원근감: 3D 요소의 원근감 효과를 지정합니다.
perspective-origin: 3D 요소의 하단 위치를 지정합니다.
backface-
visibility

rotateX() 메서드, 지정된 각도로 X축을 중심으로 요소를 회전합니다.

rotateY() 메서드, 지정된 각도로 Y축을 중심으로 회전합니다. Degree 축을 따라 회전할 요소입니다.

RotateZ() 메서드는 Z축을 중심으로 특정 각도로 회전할 요소입니다.

전환

W3C표준에서 CSS3의 전환은 다음과 같이 설명됩니다. "CSS의 전환은 다음과 같습니다. css 특정 시간 간격 내에서 속성 값이 원활하게 전환됩니다. 이 효과는 마우스 클릭, 포커스, 클릭 또는 요소 변경에 의해 트리거될 수 있으며 애니메이션 효과로 CSS 속성 값을 원활하게 변경합니다.”

값

transition 속성에는 다음 네 가지가 포함됩니다.

transition-property: 전환 그라디언트 처리를 수행할

너비
, 높이 등과 같은 다양한 표준 CSS 속성이 될 수 있습니다. transition-duration: 속성 전환 기간을 지정합니다
전환 타이밍 기능: 그라데이션 속도 지정:
1. 완화: (점진적으로 느려짐) 기본값, 완화 기능은 베지어 곡선(0.25, 0.1)과 동일합니다. , 0.25, 1.0);
2. 선형: (균일한 속도), 선형 함수는 베지어 곡선(0.0, 0.0, 1.0, 1.0)과 동일합니다.
3. easy-in: (가속) 이즈 인 기능은 베지어 곡선(0.42, 0, 1.0, 1.0)과 동일합니다.
4. 이즈 아웃: (감속), 이즈 아웃 기능은 베지어 곡선(0, 0)과 동일합니다. , 0.58, 1.0)
5. Ease-in-out: (가속한 후 감속), Ease-in-out 기능은 베지어 곡선(0.42, 0, 0.58, 1.0)과 동일합니다. 6. 큐빅-베지어: (이 값을 사용하면 특정 큐빅-베지어 곡선을 사용자 정의할 수 있습니다.) 4개의 값(x1, y1, x2, y2)은 곡선의 점 P1과 P2에만 적용됩니다. 모든 값은 [0, 1] 범위 내에 있어야 하며, 그렇지 않으면 유효하지 않습니다.
transition-delay: 지연 시간, 즉 전환 프로세스를 시작하는 데 걸리는 시간을 지정합니다.

브라우저 호환성

Internet Explorer 9 이하 버전, 전환 속성은 지원되지 않습니다.

Internet Explorer 10, Firefox, Opera 및 Chrome은 전환 속성을 지원합니다. Chrome 25 이하 및 Safari에는 접두사 -webkit-이 필요합니다.

애니메이션

애니메이션 애니메이션을 사용하려면 먼저 키프레임의 문법 규칙인

키프레임을 숙지해야 합니다. : 이름은 "@keyframes"로 시작하고 그 뒤에 "애니메이션 이름"과 중괄호 쌍 "{}"이 옵니다. 괄호 안에는 다양한 기간에 대한 몇 가지 스타일 규칙이 있습니다. 다양한 키프레임은 from(0%에 해당), to(100%에 해당) 또는 백분율(최상의 브라우저 지원을 받으려면 백분율 사용을 권장함),

@keyframes가 작동하려면 애니메이션을 통해 선택기에 바인딩되어야 합니다. 그렇지 않으면 애니메이션이 효과가 없습니다. 애니메이션의 속성은 다음과 같습니다.

속성

설명

값

animation

animation-play-state 속성을 제외한 모든 애니메이션 속성의 약어 속성

animation-name

@keyframes 애니메이션의 이름을 지정합니다.

animation- 지속 시간

애니메이션이 한 주기를 완료하는 데 걸리는 초 또는 밀리초를 지정합니다.

기본값은 0입니다.

animation-timing -function

애니메이션의 속도 곡선을 지정합니다.

기본값은 "ease"입니다.

animation-delay

애니메이션이 시작되는 시점을 지정합니다.

기본값은 0입니다.

animation-iteration-count

애니메이션이 재생되는 횟수를 지정합니다.

기본값은 1입니다(무한: 무제한

애니메이션-방향

다음 주기에서 애니메이션이 역방향으로 재생되는지 지정합니다.

기본값은 "normal"입니다(역방향: 역방향으로 재생, 대체: 정방향으로 홀수 번 재생, 반대 방향으로 짝수 번 재생, 교대 역방향: 홀수 번 역방향으로 재생, 정방향으로 짝수 번 재생.)

애니메이션 -play-state

애니메이션이 실행 중인지 일시 중지되었는지 지정

属性	描述	取值
animation	所有动画属性的简写属性，除了 animation-play-state 属性
animation-name	规定 @keyframes 动画的名称
animation-duration	规定动画完成一个周期所花费的秒或毫秒	默认是 0
animation-timing-function	规定动画的速度曲线	默认是 “ease”
animation-delay	规定动画何时开始	默认是 0
animation-iteration-count	规定动画被播放的次数	默认是 1（infinite：无限次
animation-direction	规定动画是否在下一周期逆向地播放	默认是 “normal”（reverse：反向播放；alternate：奇数次正向播放，偶数次反向播放；alternate-reverse：奇数次反向播放，偶数次正向播放。）
animation-play-state	规定动画是否正在运行或暂停	默认是 “running”（paused：暂停动画）