CSS 애니메이션:트랜잭션 이동 방법

CSS에서 애니메이션을 사용하는 첫 번째 단계는 transition property입니다.미리 정의된 변환이 부족하거나 부적합할 경우 CSS 애니메이션이 나타납니다.
참고: 이 문서에는 JavaScript가 사용되지 않았습니다!(나조차도 이 점을 잘 알고 있다고 생각한다)
애니메이션 속성은 키프레임과 애니메이션 속성의 두 부분으로 구성됩니다.키프레임 애니메이션 및 애니메이션 속성을 정의하는 단계 및 스타일은 키프레임을 요소에 지정하고 애니메이션이 정의된 요소에서 어떻게 실행되는지 지정합니다.

키프레임

키프레임을 정의하여 애니메이션에 대한 단계를 실제로 설정할 수 있습니다.이 부분 애니메이션의 문법은 단어 @keframes, 뒤에 애니메이션 이름, 뒤에 키 프레임 선택기와 스타일이다.

 @keyframes animation-name{
     0%{CSS}
     50%{CSS}
     100%{CSS}
 }

애니메이션은 키프레임 선택기에서 설정한 스타일을 다른 스타일로 변경하여 생성됩니다.이 선택기는 0%-100%의 값을 가질 수 있다(또는 0%와 100%를 나타내는 단어'from'과'to').나는 0%가 애니메이션의 시작이고 100%가 애니메이션의 끝이라고 믿는다.
애니메이션의 속성이 무한하지 않기 때문에 there is a list of them을 설정할 수 있습니다.
현재 @keyframes 옵션에 대해 가장 충격적인 것은 다음과 같습니다.
키프레임 내 !important CSS는 코드를 중요하게 만들 뿐만 아니라 전체 코드 행도 무시합니다...!놀라다

애니메이션 속성

일단 관건 프레임을 정의하면, 작업에 대한 보상을 확보하고 그것을 사용하는 것이 가장 좋다.애니메이션을 설정할 선택기 내부에 animation 속성을 추가합니다.이 속성은 8개의 애니메이션 속성에 대한 약자입니다.

 animation
 =
 animation-name
 animation-duration
 animation-timing-function
 animation-delay
 animation-iteration-count
 animation-direction
 animation-fill-mode
 animation-play-state

추가할 주요 속성은 animation-name과 animation-duration입니다.animation-name이 없으면 애니메이션을 키프레임에 연결할 수 없고 animation-duration이 없으면 지속 시간이 0으로 설정되고 다시 설정되면 애니메이션이 없습니다.
기타 속성은 애니메이션을 더 잘 정의하는 데 사용됩니다.Animation-timing-function은 애니메이션의 속도 커브를 지정합니다.사전 정의된 값(선형, 사용이 쉽고, 사용하기 쉽고, 사용하기 쉽고, 사용하기 쉽다)으로 정의하거나 steps 또는 cubic-bezier 값으로 사용자 정의할 수 있습니다.Animation-delay 부동산 공사와 transition 부동산 공사는 기본적으로 같다一애니메이션의 시작을 정의합니다.
기본적으로 애니메이션은 한 번 재생됩니다.animation-iteration-count을 사용하면 모든 숫자로 변경하거나 infinite으로 정의할 수 있습니다.Animation-direction 속성 지정 애니메이션 주기一앞쪽이든 뒤쪽이든 번갈아 순환한다.이러한 상태를 정의하는 옵션은 normal, reverse, alternate(전면 및 후면) 및 alternate-reverse(후면 후면)으로 구성됩니다.Animation-fill-mode 속성은 애니메이션이 끝나거나 시작되기 전 요소의 스타일을 정의합니다.기본 상태는 none이며, 이 상태에서는 애니메이션 요소에 스타일이 적용되지 않습니다.both 옵션을 선택하면 요소의 첫 번째 키프레임 값이 요소가 시작되고 요소가 끝나면 마지막 키프레임 값이 설정됩니다.옵션 forwards과 backwards은 both과 별도의 옵션을 정의합니다.
마지막으로 animation-play-state을 사용하면 애니메이션을 일시 중지하고 다시 재생할 수 있습니다.따라서 running(기본값)과 paused의 두 가지 옵션이 있습니다.
비록 animation 속성이 모든 열거된 옵션의 약자일지라도, 보통 animation-name과 animation-duration 및 기타 목록으로 구분된 속성에만 사용된다.

 animation: icon-animation 2s;
 animation-timing-function:ease;
 animation-delay: 5s;
 animation-iteration-count:infinite;
 animation-direction:normal;
 animation-fill-mode:both;
 animation-play-state:running;

레코드용으로만 요소에 여러 애니메이션을 추가할 수 있습니다.
prefixes에 대한 간단한 설명도 있습니다. 모든 애니메이션 속성과 키 프레임에 대해 -webkit-을 사용해야 합니다.알려진 소수의 질문은 caniuse을 참조하십시오.

예.

애니메이션 자체는 디자인에서 특정한 목적을 가진 것이 아니다.다른 한편, 그것은 어느 곳에서든 사용할 수 있고, 항상 가치를 증가시킬 수 있다.내가 말하고자 하는 것은 특정 애니메이션(이 속성 정의를 사용)은 특수효과에 가장 많이 사용되고, 변환 정의를 사용하는 애니메이션은 더 흔히 볼 수 있는 요소(예를 들어 정지 및 기타 상태)에 가장 많이 사용된다는 것이다.
그 밖에 정지 효과의 일부 효과, 심지어 행동이 이상한 선까지도 애니메이션 속성으로 정의했다.
따라서, 만약 당신이 완성한 디자인에 '그 물건' 을 추가해야 한다면, 배경이나 특정한 요소 (마운트, 스크롤, 정지...) 에 특수한 효과를 추가할 수 있습니다.
아주 좋은 블로그입니다. 위에 아주 좋은 댓글이 있습니다. 그 위에 가장 좋은 CSS 애니메이션 예가 있습니다. https://www.creativebloq.com/inspiration/css-animation-examples.

후기

내가 보기에 애니메이션 속성은 가장 높은 CSS 속성 중의 하나이기 때문에 ww효과가 아니라면'정통 CSS'의 목표를 달성해야 한다.사용자 체험에 관심이 있다면 a very nice text about animation from invisionapp team을 보십시오.
이 CSS 속성을 사용하는 데 도움이 필요하면 Kolosek 팀에 문의하십시오.Dell 설계자는 또는 [email protected]으로 이메일을 보내실 수 있습니다.그들은 지체없이 너의 생각을 듣고 싶어한다.
본문은 최초로 Kolosek Blog에 발표되었다.