CSS3 변환 속성, 애니메이션 속성 및 기능 함수

CSS3 변환 속성
transition 속성은 css의 속성을 일정 시간 동안 지나치게 매끄럽게 할 수 있음을 나타낸다.
이러한 효과는 마우스를 스쳐 지나가거나 초점을 얻거나 클릭하거나 원소에 대한 모든 변화를 촉발할 수 있다. 그리고 CSS의 속성 값을 원활하게 바꾸는 데 주의해야 할 것은 과도한 속성은 촉발 이벤트가 필요하다는 것이다. 과도한 속성은 변형된 원소의 양식에 쓰이고 가능한 원소의 초기 상태에 써서 원소가 초기 상태로 돌아갈 때도 과도할 수 있도록 한다.
transition-property: 검색 또는 설정 대상의 과도한 참여 속성, 속성 값은 단독으로 설정할 수 있고 여러 개(width,height)를 설정할 수 있으며 all(기본값)로 설정할 수 있습니다transition-duration: 검색 또는 과도한 지속 시간,단위는 (s/ms)transition-delay: 지연 과도 시간 속성 값을 정값으로 설정하면 지연 과도 효과 속성이 음값이고 조기 과도 효과transition-timg-function입니다. 설정 대상의 과도한 애니메이션 유형 속성 값은 다음과 같습니다.

linear 균일속도

ease(기본값)가 점점 느려진다

ease-in 가속

ease-out 감속

ease-in-out 가속 후 감속 과도 애니메이션 유형도 함수 cubic-bezier(,)를 통해 사용자 정의할 수 있으며 사이트에서http://cubic-bezier.com/에서 원하는 변환 애니메이션 유형 효과 정의

CSS3 애니메이션 속성 애니메이션
animation과transition의 공통점과 차이점 공통점: 모두 시간에 따라 원소의 속성 값이 달라진다:transition은 하나의 이벤트를 촉발해야 한다. animaton이 촉발할 필요가 없는 상황에서 표시할 수 있는 시간에 따라 바뀐 css 속성 값은 명확한 동적 속성이 필요하다.
애니메이션 효과는 키프레임을 통한 초기 효과 - 애니메이션 프레임 - 애니메이션 프레임 - 초기 효과 정의 키프레임: @keyframes mymove {} 문법 @keyframes mymove {from {} 초기 상태 to {} 종료 상태 @keyframes mymove {0% {초기 상태}

25%{}
50%{}

100%{    }

} 애니메이션 속성: 1. 애니메이션-name: 애니메이션 이름 검색 또는 설정 2, 애니메이션-duration: 애니메이션 지속 시간 단위 설정: s/ms3, 애니메이션-dalay: 애니메이션 지연 시간 설정 4, 애니메이션-timing-function 검색 또는 대상 애니메이션의 과도 유형 설정linear: 선형 과도.베지어 곡선(0.0,0.0,1.0,1.0)과 같다ease: 매끄러운 과도.베셀 곡선(0.25,0.1,0.25,1.0)과 같다.베셀 곡선(0.42,0,1.0,1.0)과 같다.베셀 곡선(0,0,0.58,1.0)과 같다.베셀 곡선(0.42,0,0.58,1.0) step-start: 애니메이션이 끝날 때마다 정으로 바로 넘어가는 상태(프레임 애니메이션 효과 실현) 5, 애니메이션-iteration-count 순환 횟수 infinite 무한순환number: 2 3 6, 애니메이션-direction 설정 애니메이션이 순환 중 반대 운동normal reverse: 반대 방향alternate: 애니메이션이 먼저 정상적으로 운행하고 반대 방향으로 운행하는지,그리고 0%-100%–0% alternate-reverse: 애니메이션이 먼저 반대 방향으로 운행하고 100%-0%-100% 7, animation-fill-mode: 애니메이션이 재생되기 전이나 이후의 효과가 none로 0%(초기 상태)가 지연된 후에 백워드가 0%(초기 상태)가 발생하도록 규정하고 지연 전에 forwards 애니메이션이 끝난 후,끝 위치에 머무르는both효과=backwards+foewards8,animation-play-state 설정 애니메이션의 상태running:운동paused:animation-play-state:paused 일시 정지;마우스가 지나갈 때 애니메이션이 멈추면 마우스를 움직여서 계속 실행합니다
2D 기능 함수
문법:tranform: 함수 이름(매개 변수),1, 2D 변위translate()translate(tx) 매개변수가 값을 설정할 때 수평 방향을 나타내는 변위translate(tx,ty) 첫 번째 값은 수평 방향의 거리를 나타냅니다.두 번째 값은 수직 방향의 거리를 나타낸translateX(tx) 지정된 방향 설정 위치 이동 X축을 따라 이동하는translateY(ty) 지정된 방향 설정 위치 이동 Y축을 따라 이동하며 속성 값이 양수일 때 오른쪽 또는 아래로 이동하지만 속성 값이 음수일 경우 왼쪽 또는 위로 이동하는 속성 값은 px/%(백분율 크기의 참조물은 원소의 너비)translate()위치 이동 효과와 위치 이동의relative는 유사합니다. 모두 현재 위치에서 위치 이동을 하고 다른 요소에 영향을 주지 않습니다. 원래의 위치는 2, 2D 축소scale() 속성 값을 보존하고 배수를 나타냅니다. 기본값은 1이고 마이너스일 수 있습니다.그러나 scale(var1) 수평과 수치 scale(var1, var2) 수평 수직 scaleX() 수평 방향 축소율 scaleY() 수직 방향 축소율 3, 2D 회전rotate() 중심점을 따라 회전 속성 값은 도(deg) 단위로 양의 속성 값만 넣을 수 있습니다. 시계 반대 방향으로 회전하는 음값: 시계 반대 방향으로 회전하는 rotateX() X축을 따라 회전하는 rotateY 축을 따라 회전하는 4,2D 기울기 skew() 속성 값의 단위는 도(deg) skew(var1) 값입니다. 값은 x축을 따라 skew(var1, var2) var1이 x축을 따라 기울어지고, var2가 y축을 따라 기울어지는 속성 값은 양수입니다. 왼쪽/위로 기울기 속성 값은 마이너스입니다. 오른쪽/아래로 skewX() skewY()
설명: 원소가transfrom을 통해 변형될 때 다른 원소에 영향을 주지 않고 문서 흐름에서 벗어나지 않습니다. 변형할 때 원소는 기본적으로 중심점을 따라 변형됩니다. 5. 원점 설정 속성:transform-origin transform-origin: var1 var2;속성값은 10px/left/right/top/bottom/center/20%
6、backface-visibility:hidden/visible 회전된 요소의 뒷면을 숨깁니다