이행:
모션을 추가하는 속성으로 요소의 값이 변경될 때마다 모션이 변경됩니다.
전환 자체는 스타일을 제공하는 속성이 아니지만 가상 클래스(예: hover) 또는 JavaScript의 다른 작업에서 사용됩니다.
전환: 속성 이름 기간 타이밍 함수 대기 시간;
transition-property: 효과를 적용할 속성의 이름을 지정합니다.
all: 모든 속성에 할당
속성 이름: 전환 효과의 속성 이름을 지정합니다.
– 여러 번호를 지정할 경우 쉼표(,)로 구분
transition-duration: 전환 효과의 지속 시간을 지정합니다.
os: 전환 효과 x
시간: 지정
transitionio-timing-function : 전환 효과의 타이밍 함수 지정
| 편안한 | 느림-빠름-느림 | 큐빅 베지어(0.25, 0.1, 0.25, 1) |
| 선의 | 계속해서 | 3차 베지어(0, 0, 1, 1) |
| 쉽게 | 느리게 | 3차 베지어(0.42, 0, 1, 1) |
| 완화하다 | 속도 | 큐빅 베지어(0, 0, 0.58, 1) |
| 쉽게 | 느림-빠름-느림 | 3차 베지어(0.42, 0, 0.58, 1) |
transition-delay: 대기 시간(시작할 시간(초))
os: 전환 효과 x
시간: 지정
변환: 요소에 대한 이동, 회전, 크기 조정 및 기타 효과.
transform : 변환 함수 1 변환 함수 2 변환 함수 3 … ;
변환: 원근 이동 비율 회전 기울기;
2D 전송 기능
| 전환하다 | 설명하다 |
| 변환(x, y) | (x축, y축) 모션 |
| 번역 X(x) | (x축) 모션 |
| Y(y) 번역 | (y축) 이동 |
| 척도(x,y) | (x, y)만큼 큰 |
| 척도 X(x) | (x)만큼 큰 |
| 척도 Y(y) | (y)만큼 큰 |
| 회전(도) | 회전 각도 |
| 왜곡(x,y) | (x, y) 코너 클리핑 |
| 스큐 X(x) | (x) 기울기 |
| 스큐 Y(y) | (y) 기울기 |
| 행렬(n,n,n,n,n,n) | 2D 변형 효과 |
3차원 변환 기능
| 전환하다 | 설명하다 |
| 시야각(n) | 화각(거리) |
| 회전X(x) | x축 회전 |
| Y(y) 회전 | y축 회전 |
| Z(z) 회전 | z축 회전 |
| 3d 회전(x, y, z, a) | (x축, y축, z축, 각도) 회전 |
| matrix3d(n, n, n, n, n, n) | 세 번째 Chauner 전환 효과 |
| 번역 Z(z) | z축 이동 |
| translate3d(x, y, z) | (x, y, z) 축 모션 |
| 축척(z) | z축에서 z만큼 크게 |
| scale3d(x, y, z) | (x, y, z)만큼 큰 |
perspective: 원근 거리 지정(perspective)
뒷면 가시성: 가시적/숨김;
– 보이는/보이지 않는 등은 회전에 의해 뒤집어집니다.
만화
@키프레임
애니메이션 흐름을 나누어 시점을 조정할 수 있습니다.
변수에 키프레임을 선언하고 해당 변수를 호출하여 사용합니다.
– 누구에게 누구로부터
– 0%~100%
애니메이션 속성
애니메이션 : 이름 기간 타이밍-기능 지연 반복-카운트 방향
animation-name : 애니메이션의 @keyframes 이름
animation_duration: 기간
animation-delay: 지연 시간
animation-iteration-count : 반복 횟수
animation-timing-function: 반복 유형
| 애니메이션 타이밍 기능: 쉬움; |
| 애니메이션 타이밍 기능: easy in; |
| 애니메이션 타이밍 기능: ease out; |
| 애니메이션 타이밍 기능: 슬로우 인 및 슬로우 아웃; |
| 애니메이션 타이밍 기능: 선형; |
애니메이션 방향: 애니메이션 방향