css3 고급 애니메이션 기초

transform-origin 변환 원점

transition 과도 애니메이션

transition 속록 함수에서 선택할 수 있는 값

애니메이션 패드

애니메이션 키프레임 @keyframes

애니메이션

columns 다열 레이아웃

transform은 원소의 형상, 각도, 위치 등의 변화를 실현할 수 있다.값:rotate();x/y/z를 축으로 회전하며 기본값은 zrotatex(), rotatey(), rotatez(), rotate3d(x, y,z,angle) x, y,z->
scale(); x/y를 축으로 하여 scale(x, y)를 축소하여 두 개의 값을 받아들인다. 만약 두 번째 파라미터가 제공되지 않으면 두 번째 파라미터는 첫 번째 파라미터의 값인 scalex()를 사용한다. scaley() 값은 숫자로 배수를 표시하고 단위 scalez() scale3d()를 추가하지 않는다.scale3d(sx,sy,sz)
skew(); 원소를 기울여 skew(x, y)를 비뚤어지게 하기;첫 번째 매개변수는 X축, 두 번째 매개변수는 Y축에 대해 두 값을 적용합니다.두 번째 매개변수가 제공되지 않으면 기본값은 0 skewx (), skewy ()
translate(); 자신의 위치를 기준으로 거리를 이동할 수 있습니다.translate(x, [y]) translatex(),translatey(),translatez(),translate3d(x, y, z)
transform-origin 변환 원점
모든 원소는 중심점이 있는데, 기본적으로 중심점은 원소 x축과 y축의 50%에 위치한다
수치는 다음과 같다.
변환 애니메이션
transition 속성은 css3의 복합 속성으로 주로 몇 개의 하위 속성을 포함한다
등록 정보
소개하다.
transition-property
변환 또는 동적 시뮬레이션의 css 속성 지정하기
transition-duration
변환에 필요한 시간 지정
transition-timing-function
변환 함수 지정하기
transition-delay
시작 지연 시간 지정
transition 속록 함수에서 선택할 수 있는 값
등록 정보
소개하다.
linear
같은 속도로 시작해서 끝까지 규정한 과도한 결과 (cubic-bezier () 0, 0, 1, 1)
ease
느린 속도로 시작하도록 규정하다.그리고 빨라진다.그리고 느린 속도로 끝난 과도한 결과(cubic-bezier()0.25,0.1,0.25,1)
ease-in
느린 속도로 시작하도록 규정된 과도한 결과(cubic-bezier()0,0,1,1)
easy-out
느린 속도로 끝내는 과도한 효과
ease-in-out
느린 속도로 시작하고 끝내도록 했어요.
cubic-bezier(n,n,n,n)
cubic-bezier 함수에서 자신의 값을 정의합니다.가능한 값은 0에서 1 사이의 값입니다
베셀 곡선은 애니메이션과transition 두 속성 중 cubic-bezier는 변화를 제어하는 속도 곡선이다. 다음은 cubic-bezier가 무엇인지 알아보자.
cubic-bezier는 3차 베셀 곡선이라고 하는데 주로 속도 곡선을 생성하는 함수로 규정되어 있다cubic-bezier(,,,)https://blog.csdn.net/wjnf012/article/details/78795573
애니메이션 패드
애니메이션 키프레임 @keyframes
애니메이션은 키프레임 키프레임에 지정된 프레임 상태에 따라 과도적으로 실행됩니다.0% - 100%는 애니메이션의 시간 변환을 나타냅니다.

@keyframes demoMove{
    0%{ background-color:red;}
    10%{ background-color:green;}
    20%{ background-color:white;}
    50%{ width:200px;}
    100%{ height:200px;}
}

프레임 속도 안에 0%와 100% 두 개의 키 프레임만 있다면 from to로 대체할 수 있습니다
애니메이션
animation 속성은 css3의 복합 속성으로 주로 하위 속성을 포함한다
등록 정보
소개하다.
값
animation-name
이 속성은 애니메이션을 실행하는 키프레임 이름입니다
animation-duration
이 속성은 애니메이션이 실행된 시간입니다.
animation-timing-function
변환 함수 속도 지정
animation-delay
실행 지연 시간
animation-direction
normal/reverse/alternate/alternate-reverse;
animation-iteration-count
infinite/number;
animation-fill-mode
forwards/backwards/both/none;
animation-iteration-count
속성은 주로 애니메이션의 재생 횟수를 정의하는 데 쓰인다.
n 재생 횟수, infinite 무제한
animation-direction
속성은 주로 애니메이션 재생 방향을 설정하는 데 쓰인다
normal 기본값입니다.애니메이션은 정상적으로 재생되고, Reverse 애니메이션은 반대로 재생됩니다.alternate, 애니메이션은 홀수회(1, 3, 5...)에서 정방향으로 재생되고 짝수회(2, 4, 6...)에서 반방향으로 재생됩니다.alternate-reverse 애니메이션은 홀수회(1, 3, 5...)에서 반대로 재생되고 짝수회(2, 4, 6...)에서 정방향으로 재생됩니다.
animation-play-state
속성은 주로 요소 애니메이션의 재생 상태를 제어하는 데 사용된다.
running 재생,paused 일시 정지
animation-fill-mode
애니메이션이 시작되기 전과 끝난 후에 발생하는 동작을 속성으로 정의합니다.주로 네 개의 속성 값이 있다
기본값: 애니메이션이 예상대로 진행되고 끝납니다. 애니메이션이 마지막 프레임을 완성할 때 애니메이션은 초기 프레임으로 반전됩니다. forwards: 애니메이션이 끝난 후에 마지막 관건적인 프레임을 계속 적용하는 위치를 나타냅니다. backwards: 요소에 애니메이션 스타일을 적용할 때 애니메이션의 초기 프레임을 신속하게 적용합니다(지연 1s로 볼 때). both: 요소 애니메이션은 forwards와 backwards 효과가 동시에 있습니다.
columns 다열 레이아웃
W3C는 웹 페이지에서 신문, 잡지 같은 다열 레이아웃을 쉽게 구현하기 위해 CSS3에 다열 레이아웃 모듈 (CSS Multi Column Layout Module) 을 추가했다.이것은 주로 텍스트의 다열 레이아웃에 응용되었다. 이런 레이아웃은 신문과 잡지에서 수십 년 동안 사용되었지만 웹 페이지에서 이러한 효과를 실현하기는 상당히 어렵다. 다행히도 CSS3의 다열 레이아웃은 쉽게 실현할 수 있다.
구문:
columns: [column-width] [column-count];
등록 정보
소개하다.
column-width
각 열의 폭을 가리키며 용기의 폭에 따라 적응한다(최소 폭)
column-count
규정된 열수를 가리키며 유일하게 정확한 것은 열수이다
column-gap
열과 열 사이의 폭을 설정하고 수치로 직접 표시하면 됩니다(eg:10px)
column-gap
주로 열과 열 사이의 간격을 설정하는데 사용되며,column-gap 값이 표시되지 않을 때, 그 값의 크기는 브라우저의 기본 font-size에 따라 결정됩니다
그러나column-rule는 어떤 공간적 위치도 차지하지 않으며 열과 열 사이의 폭을 바꾸면 열의 위치도 바꾸지 않습니다.
등록 정보
소개하다.
column-rule-width
너비
border-width 속성과 유사하게 열 경계선의 폭을 정의하는데 기본값은'medium'입니다.column-rule-width 속성은 임의의 부동점수를 받아들이지만 마이너스 값은 받지 않습니다.그러나border-width 속성처럼 키워드:medium,thick,thin을 사용할 수 있다.
등록 정보
소개하다.
column-rule-style
스타일
border-style 속성과 유사하며, 주로 열 경계 스타일을 정의하는데, 기본값은 'none' 입니다.column-rule-style 속성 값은border-style 속 값과 같으며,none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outsetcolumn-rule-color:색을 포함한다.border-color 속성과 유사
column-span: 1/all 다중 레이아웃 요소 내의 하위 요소를 설정합니다. 제목 효과와 같은 크로스 레이아웃을 할 수 있습니다.즉, 뉴스 제목이 모든 내용을 가로질러야 한다.주: 이 속성은 하위 요소에 설정해야 합니다.