CSS3의 변환 및 전환, 애니메이션 및 관련 속성에 대한 간략한 소개

1. Transformation

transform: 요소 개체를 회전, 크기 조정, 이동, 기울이기 및 행렬 변환할 수 있습니다.
예:

transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);
/*矩阵变形*/
matrix(<number>,<number>,<number>,<number>,<number>,<number>);
/*透视*/
perspective(length);

transition: 전환 속성

transition: 전환 효과의 CSS 속성 이름 전환 효과의 지속 시간 속도 효과의 속도 곡선 전환 효과 시작 시간

transition: property duration timing-function delay;
/*示例*/
transition:1s ease all;
-webkit-tansition:1s ease all;
-moz-transition:1s ease all;
-o-transition:1s ease all;

rotate(): 2차원 공간 회전 요소.

요소에 원근감 값이 설정된 경우,rotate3d()를 사용하여 3차원 공간에서 회전을 달성할 수 있습니다.

rotateX(angele)/*相当于rotate3d(1,0,0,angle)指定在三维空间内的X轴旋转*/
rotateY(angele)/*相当于rotate3d(0,1,0,angle)指定在三维空间内的Y轴旋转*/
rotateZ(angele)/*相当于rotate3d(0,0,1,angle)指定在三维空间内的Z轴旋转*/

scale()

scaleX(<number>)/*只在X轴（水平方向）缩放元素*/
scaleY(<number>)/*只在Y轴（垂直方向）缩放*/
scaleZ(<number>)/*只在Z轴缩放，前提：元素设定透视值*/

translate([,]): 이동, 즉 변위량입니다.

translateX(<translation-value>);/*只在X轴（水平方向）移动*/
translateY(<translation-value>);/*只在Y轴（垂直方向）移动*/
translateZ(<translation-value>);/*只在Z轴移动，前提：元素设置透视值*/

skew(): Skew

skewX(<angle>);/*只在X轴（水平）倾斜*/
skewY(<angle>);/*只在Y轴（垂直）倾斜*/

matrix(a,c,e,b,d,f): 행렬 변형, c와 e의 값은 사인 또는 코사인 값으로 표시됩니다.

a: X축 크기 조정
c: SkewY(); Y축 기울기
e: SkewX() 이동
f: TranslateY() Y축 이동

transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);

perspective():

.wrap{
    perspective:1000px; 
}
.wrap .child{
    transform:perspective(1000px);
}

2. Transition

transition-property

: 전환 속성

transition-property:all;/*针对所有元素都有过度效果*/
transition-property:none;/*没有元素有过度效果*/
transition-property:ident;/*指定css属性有过度效果，例如width*/

transition-duration: 전환 시간

transition-delay : 지연 시간, 음수일 경우 과도한 동작이 표시되기 시작합니다. 이 시점부터 이전 작업이 잘립니다.

전환 타이밍 기능: 과도한 효과, 기본 용이성.

transition-timing-function:ease;/*缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔*/
transition-timing-function:linear;/*线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数*/
transition-timing-function:ease-in;/*渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数*/
transition-timing-function:ease-out;/*渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数*/
transition-timing-function:ease-in-out;/*渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数*/
transition-timing-function:cubic-bezier;/*特殊的立方贝塞尔曲线效果*/

3. Animation

animation-name

: 애니메이션 이름은 @keyframes로 정의되므로 @keyframes 규칙과 함께 사용해야 합니다. 쉼표로 구분하세요.

@keyframes

은 네임스페이스 뒤에 명사가 오는 것과 동일합니다. 클래스의 animation-name이 해당 이름을 정의하면 애니메이션이 실행될 수 있습니다. 애니메이션을 정의할 때 from 및 to 키워드를 직접 사용하여 한 상태에서 다른 상태로 전환할 수 있습니다.

.animation_name{
    left:0;
    top:100px;
    position: absolute;
    -webkit-animation: 0.5s 0.5s ease infinite alternate;
    -moz-animation: 0.5s 0.5s ease infinite alternate;
    -webkit-animation-name:demo;
    -moz-animation-name:demo;
}
@-webkit-keyframes demo{
    from{left:0;}
    to{left:400px;}
}
@-webkit-keyframes demo1{
    0%{left:0;}
    50%{left:200px;}
    100%{left:400px;}
}

animation-duration

: 애니메이션 시간

animation-timing-function

: 재생 방법, 값은 다음과 같습니다. ease: 완화 효과, 큐빅 베지어(0.25,0.1,0.25와 동일) ,1.0) 함수, 즉 3차 베지어입니다.

linear: 선형 효과

ease-in: 페이드 인 효과
ease-out: 페이드 아웃 효과
ease-in-out: 페이드 아웃 효과
step-start: 즉시 애니메이션 종료 상태로 점프
step-end : 애니메이션 실행 시간이 끝날 때까지 애니메이션 시작 상태를 유지하고, 즉시 애니메이션 종료 상태로 점프합니다.
step([,[start | end]]?): 첫 번째 매개변수 번호는 지정된 간격 번호, 즉 애니메이션 n 단계로 나누어집니다. 단계별 표시, 두 번째 매개변수 기본값은 end, 마지막 단계 상태를 설정합니다. 시작은 끝의 상태, 끝은 시작의 상태, 설정이 애니메이션 채우기 모드의 효과와 충돌하는 경우 , animation-fill-mode를 사용하여 애니메이션 종료 상태로 설정합니다.
cubic-bezier(,,,): 특수 3차 제벨 곡선 효과

animation-delay

: 재생 시간 시작

animation-iteration-count

: 재생 시간, 무한 값은 무한 루프 재생을 의미합니다

animation-direction

: 재생 방향, 값은 다음과 같습니다. normal: 일반 방향

reverse: 애니메이션이 역방향으로 실행되며 방향은 항상 일반과 유사합니다.

alternate: 애니메이션이 앞뒤로 번갈아 가며 순환합니다.

animation -fill -mode

: 재생 후 상태, 값: none: 기본값, 설정되지 않음

forwards: 종료 후 애니메이션이 끝나는 상태 유지

backwards: 종료 후 애니메이션이 시작될 때의 상태로 돌아감
둘 다: 끝 후에는 앞으로 및 뒤로 두 가지 규칙을 따를 수 있습니다.
animation-play-state: 개체 애니메이션의 상태를 검색하거나 설정합니다. 값:
running: 기본값, 모션
paused: 일시 중지됨

4개, 관련 속성

transform-origin

: 변환 기준점인 변환 원점은 기본값이 요소의 중심점입니다. 두 개의 매개변수가 있는데 매개변수 1은 가로좌표이고 매개변수 2는 세로좌표입니다. percentage: 백분율을 사용하여 좌표 값 지정, 음수 가능

length: 길이를 사용하여 좌표 값 지정, 음수 가능

왼쪽 가운데 오른쪽: 가로 방향 값
위 가운데 아래: 세로 방향 값

perspective-prigin

: 원점 3D 요소의 X축과 Y축에 정의된 원점을 사용하면 3D 요소의 아래쪽 위치를 변경할 수 있습니다. 이 속성은 요소 자체가 아닌 요소의 하위 요소인 원근감입니다. 참고: 이 속성은 3D 변환 요소에만 영향을 미치는 관점 속성과 함께 사용해야 합니다. 값: 백분율, 길이, 왼쪽, 가운데, 오른쪽, 위쪽, 가운데, 아래쪽

backface-visibility

: 콘텐츠의 뒷면을 숨깁니다. 변환된 콘텐츠는 기본적으로 반전 후에도 표시됩니다. 뒷면의 경우 - 가시성을 숨김으로 설정하면 회전 후 내용이 숨겨지고 회전 후 앞면이 더 이상 표시되지 않습니다. 값: 표시, 숨김transform-style: 3D 렌더링, 포함된 요소가 3D 공간에서 렌더링되는 방식을 설정합니다. 두 가지 값이 있습니다.
Flat: 모든 하위 요소가 2D 평면에 렌더링됩니다.
preserve-3d: 3D 공간을 유지합니다.

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