CSS3의 전환, 변형 및 애니메이션이란 무엇입니까? 세 가지의 차이점-CSS 튜토리얼-php.cn

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

青灯夜游

풀어 주다： 2018-09-19 15:47:07

원래의

2515명이 탐색했습니다.

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

transition

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

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

로그인 후 복사

전환 관련 속성:

transition-property : 실행을 지정하는 데 사용됩니다. 전환 효과의 속성은 없음, 전체 또는 특정 속성일 수 있습니다.
transition-duration: 애니메이션 실행 기간(s(초) 또는 ms(밀리초)).
transition-timing-function: 변환 속도 효과, 선택적 값은 easy|linear|ease-in|ease-out|ease-in-out|cubic-bezier(사용자 정의 시간 곡선)입니다.
transition-delay: 애니메이션이 실행되기 시작하는 시간을 지정하는 데 사용됩니다. 값은 전환 기간과 동일하지만 음수일 수 있습니다.

transform

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

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

로그인 후 복사

변환 관련 속성:

rotate 회전
rotate의 단위는 도이며 양수는 시계 방향 회전을 나타내고 음수는 반시계 방향 회전을 나타냅니다.
scale Scale
scale의 값 범위는 0~n입니다. 1보다 작으면 축소하고, 그렇지 않으면 확대합니다. 예를 들어 scale(0.5, 2)는 가로 방향을 1배로 축소하고 세로 방향을 1배로 확대한다는 의미입니다. 또한 scaleX나 scaleY를 통해서도 한 방향을 설정할 수 있습니다.
skew 왜곡
skew의 단위는 회전과 동일하며 도 단위입니다. 예를 들어,skew(30deg, 10deg)는 가로 방향이 30도, 세로 방향이 10도 기울어졌다는 의미입니다.
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에는 전환과 같은 자체 해당 속성이 있습니다. 애니메이션 유형은 주로 애니메이션 이름, 애니메이션 타이밍 기능, 애니메이션 반복 횟수, 애니메이션 재생 상태입니다. 일부 속성은 아래에 설명되어 있습니다.

animation-name 키프레임 이름:
은 이전 키프레임에서 생성된 애니메이션의 이름인 애니메이션의 이름을 정의하는 데 사용됩니다. 값이 none 이면 애니메이션 효과가 없습니다. 요소에 여러 애니메이션을 동시에 첨부하려면 쉼표로 구분하면 됩니다.
animation-iteration-count 애니메이션 반복 횟수:
기본값은 1입니다. 무한 반복하려면 무한으로 설정하면 됩니다.
animation-direction 애니메이션 재생 방향:
두 개의 값만 있고 기본값은 일반입니다. 일반으로 설정하면 애니메이션의 각 주기가 앞으로 재생되며 다른 값은 교대로 재생됩니다. 예, 애니메이션은 짝수 번에는 정방향으로 재생되고, 홀수 번에는 역방향으로 재생됩니다.
animation-play-state 재생 상태:
주로 실행 중과 일시 중지의 두 가지 값이 있으며, 그 중 실행 중이 기본값입니다. 일시 정지를 통해 현재 재생 중인 애니메이션을 멈출 수 있고, 달리기를 통해 일시 정지된 애니메이션을 다시 재생할 수도 있습니다. 이 속성은 일반적으로 사용되지 않습니다.

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