CSS3의 전환, 변형 및 애니메이션이란 무엇입니까? 세 가지의 차이점

이 장에서는 CSS3의 전환, 변형 및 애니메이션이 무엇인지 소개합니다. 세 가지의 차이점. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

transition

transition을 사용하면 CSS 속성 값이 특정 시간 간격 내에서 원활하게 전환될 수 있습니다 구문은 다음과 같습니다.

transition ： transition-property transition-duration transition-timing-function transition-delay [, ...]

전환 관련 속성:

1. transition-property : 실행을 지정하는 데 사용됩니다. 전환 효과의 속성은 없음, 전체 또는 특정 속성일 수 있습니다.

2. transition-duration: 애니메이션 실행 기간(s(초) 또는 ms(밀리초)).

3. transition-timing-function: 변환 속도 효과, 선택적 값은 easy|linear|ease-in|ease-out|ease-in-out|cubic-bezier(사용자 정의 시간 곡선)입니다.

4. transition-delay: 애니메이션이 실행되기 시작하는 시간을 지정하는 데 사용됩니다. 값은 전환 기간과 동일하지만 음수일 수 있습니다.

transform

transform은 2D와 3D로 나누어집니다. 여기서는 주로 회전 회전, 왜곡 왜곡, 스케일링 스케일 및 변환을 포함하는 더 일반적으로 사용되는 2D 변환만 소개합니다. 모바일 번역 및 행렬 변환 행렬의 구문은 다음과 같습니다.

transform: rotate | scale | skew | translate |matrix;

변환 관련 속성:

1. rotate 회전
   rotate의 단위는 도이며 양수는 시계 방향 회전을 나타내고 음수는 반시계 방향 회전을 나타냅니다.

2. scale Scale
   scale의 값 범위는 0~n입니다. 1보다 작으면 축소하고, 그렇지 않으면 확대합니다. 예를 들어 scale(0.5, 2)는 가로 방향을 1배로 축소하고 세로 방향을 1배로 확대한다는 의미입니다. 또한 scaleX나 scaleY를 통해서도 한 방향을 설정할 수 있습니다.

3. skew 왜곡
   skew의 단위는 회전과 동일하며 도 단위입니다. 예를 들어,skew(30deg, 10deg)는 가로 방향이 30도, 세로 방향이 10도 기울어졌다는 의미입니다.

4. translate Offset
   Offset에는 수평 오프셋과 수직 오프셋도 포함됩니다. move(x,y)는 수평과 수직으로 동시에 이동합니다(즉, X축과 Y축이 동시에 이동합니다). 수직(Y축 이동).

animation

CSS3의 애니메이션 이름은 "@keyframes"로 시작하고 그 뒤에 "애니메이션 이름"과 이전 중괄호 쌍 "{}"이 옵니다. 다양한 기간에 대한 일부 스타일 규칙이 포함되어 있으며 이는 CSS 스타일을 작성하는 방식과 약간 비슷합니다. "0%"와 "100%" 사이와 같이 여러 백분율로 구성된 "@keyframes"의 스타일 규칙의 경우 구문은 다음과 같습니다.

@keyframes IDENT {
  from {
    Properties: Properties value;
  }
  Percentage {
    Properties: Properties value;
  }
  to {
    Properties: Properties value;
  }
}

或者全部写成百分比的形式： 
@keyframes IDENT {
  0% {
    Properties: Properties value;
  }
  Percentage {
    Properties: Properties value;
  }
  100% {
    Properties: Properties value;
  }
}

animation에는 전환과 같은 자체 해당 속성이 있습니다. 애니메이션 유형은 주로 애니메이션 이름, 애니메이션 타이밍 기능, 애니메이션 반복 횟수, 애니메이션 재생 상태입니다. 일부 속성은 아래에 설명되어 있습니다.

1. animation-name 키프레임 이름:
   은 이전 키프레임에서 생성된 애니메이션의 이름인 애니메이션의 이름을 정의하는 데 사용됩니다. 값이 none 이면 애니메이션 효과가 없습니다. 요소에 여러 애니메이션을 동시에 첨부하려면 쉼표로 구분하면 됩니다.

2. animation-iteration-count 애니메이션 반복 횟수:
   기본값은 1입니다. 무한 반복하려면 무한으로 설정하면 됩니다.

3. animation-direction 애니메이션 재생 방향:
   두 개의 값만 있고 기본값은 일반입니다. 일반으로 설정하면 애니메이션의 각 주기가 앞으로 재생되며 다른 값은 교대로 재생됩니다. 예, 애니메이션은 짝수 번에는 정방향으로 재생되고, 홀수 번에는 역방향으로 재생됩니다.

4. animation-play-state 재생 상태:
   주로 실행 중과 일시 중지의 두 가지 값이 있으며, 그 중 실행 중이 기본값입니다. 일시 정지를 통해 현재 재생 중인 애니메이션을 멈출 수 있고, 달리기를 통해 일시 정지된 애니메이션을 다시 재생할 수도 있습니다. 이 속성은 일반적으로 사용되지 않습니다.

위 내용은 CSS3의 전환, 변형 및 애니메이션이란 무엇입니까? 세 가지의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!