재창조 할 25 가지 멋진 CSS 애니메이션 예제

css 애니메이션 마우스 예제
(이미지 출처 : Donovan Hutchinson)
1/2 페이지 : CSS 애니메이션 튜토리얼

잘 사용되는 CSS 애니메이션은 매우 유용하고 강력한 도구입니다. 관심이나 창의적인 흥분을 더하고, 사용자의 시선을 이끌고, 무언가를 빠르고 간결하게 설명하고 사용성을 향상시킬 수 있습니다. 이러한 이유로 최근 몇 년 동안 사이트와 앱에서 점점 더 많은 애니메이션을 보았습니다.

이 기사에서는 우리가 본 가장 멋진 CSS 애니메이션 예제를 모아서 다시 만드는 방법을 보여줍니다. 다양한 심층 자습서와 영감을주는 효과 (및 해당 코드 링크)를 읽어보십시오.



CSS 애니메이션이란 무엇입니까?

CSS 애니메이션은 프로세서와 메모리를 많이 사용하는 JavaScript 또는 Flash를 사용하지 않고도 특정 HTML 요소에 애니메이션을 적용하는 방법입니다. 변경할 수있는 CSS 속성의 수 또는 빈도에는 제한이 없습니다. CSS 애니메이션은 애니메이션의 키 프레임을 지정하여 시작됩니다. 이러한 키 프레임에는 요소가 가질 스타일이 포함됩니다.



애니메이션에 관해서는 제한적으로 보일 수 있지만 CSS는 실제로 정말 강력한 도구이며 아름답고 부드러운 60fps 애니메이션을 생성 할 수 있습니다. 프런트 엔드 웹 개발자 인 Adam Kuhn은 '사이트에 의미있는 깊이를 제공하는 사려 깊고 유연한 애니메이션을 제공하는 것이 어려울 필요가 없습니다. '이제 최신 CSS 속성은 사용자에게 기억에 남는 경험을 만드는 데 필요한 거의 모든 도구를 제공합니다.'

최고의 애니메이션은 여전히 ​​디즈니 클래식에 뿌리를두고 있습니다. 애니메이션의 12 가지 원칙 – CSS 애니메이션 예제 전체에서 이에 대한 몇 가지 언급을 볼 수 있으므로 시작하기 전에 해당 기사를 확인하는 것이 좋습니다. 당신은 또한 우리의 훌륭한 애니메이션 뮤직 비디오 더 많은 예와 영감을 얻으십시오.



황금률은 CSS 애니메이션이 과장되어서는 안된다는 것입니다. 작은 움직임도 큰 영향을 미칠 수 있으며 너무 많은 경우 사용자를 산만하게하고 짜증을 낼 수 있습니다. 다음은 우리가 가장 좋아하는 예와이를 재현하는 방법입니다.

01. 재미있는 마우스 효과

이것은 마우스를 따라 다니는 재미있는 효과입니다. 페이지의 요소에주의를 끌고 싶을 때 유용 할 수 있습니다.

이 효과를 위해 HTML이 거의 필요하지 않습니다.



먼저 데모를 배치하고 3D 변환에 대한 관점을 설정합니다.

.demo { background-color: hsl(207, 9%, 19%); display: flex; align-items: center; justify-content: center; height: 100vh; width: 100%; } .perspective-container { perspective: 800px; }

그런 다음 애니메이션을 적용 할 div의 스타일을 지정합니다.

.card { background-image: url(https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif); background-size: cover; box-shadow: 0 0 140px 10px rgba(0,0,0,.5); position: relative; height: 300px; width: 500px; overflow: hidden; /* Try removing this to see how the sheen works! */ --sheenX: 0; /* Set these with JavaScript */ --sheenY: 0; }

여기에서 배경을 설정 한 다음 과다 ...에 숨겨진 추가 할 수 있도록 광휘 나중에 효과. 우리는 또한 설정 CSS 변수 , sheenX유대인 .

이러한 광택 변수는 광택 효과를 배치하는 데 도움이됩니다. 우리는 우리 카드의 의사 요소 :

.card::after { content: ''; position: absolute; top: -400px; right: -400px; bottom: -400px; left: -400px; background: linear-gradient(217deg, rgba(255,255,255,0), rgba(255,255,255,0) 35%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%); transform: translateX(var(--sheenX)) translateY(var(--sheenY)); }

여기에서는 의사 요소가 컨테이너보다 큰지 확인합니다. 이것은 우리에게 카드 사용 변환 .

그만큼 변환 속성은 앞서 설정 한 CSS 변수를 사용합니다. JavaScript로 설정하겠습니다. 먼저 마우스 이벤트를 수신하도록 JavaScript를 설정해 보겠습니다.

document.onmousemove = handleMouseMove;

이제 우리는 handleMouseMove 처리 할 기능 onmousemove :

function handleMouseMove(event) { const height = window.innerHeight; const width = window.innerWidth; // Creates angles of (-20, -20) (left, bottom) and (20, 20) (right, top) const yAxisDegree = event.pageX / width * 40 - 20; const xAxisDegree = event.pageY / height * -1 * 40 + 20; target.style.transform = `rotateY(${yAxisDegree}deg) rotateX(${xAxisDegree}deg)`; // Set the sheen position setSheenPosition(event.pageX / width, event.pageY / width); }

우리의 함수는 창 높이와 너비를 취하고 X 및 Y 축에 각도를 생성합니다. 그런 다음이를 변환 우리의 스타일 카드 . 이것은 마우스를 기준으로 카드에 각도를줍니다!

다음으로 의사 요소의 위치를 ​​설정하는 함수를 호출합니다.

function setSheenPosition(xRatio, yRatio) { // This creates a 'distance' up to 400px each direction to offset the sheen const xOffset = 1 - (xRatio - 0.5) * 800; const yOffset = 1 - (yRatio - 0.5) * 800; target.style.setProperty('--sheenX', `${xOffset}px`) target.style.setProperty('--sheenY', `${yOffset}px`) }

가상 요소는 마우스와 반대 방향으로 움직일 때 가장 잘 보입니다. 이를 달성하기 위해 비율을 -1로 계산하여 반대 방향으로 변경되는 -0.5에서 0.5 사이의 숫자를 만듭니다.

이 숫자에 800을 곱하여 최대 400px , 이는 우리가 설정 한 광휘 외부의 의사 요소 카드 .

마지막으로 이러한 오프셋 값을 CSS 변수 속성으로 설정하면 브라우저의 렌더러가 나머지 작업을 수행합니다.

이제 광택 효과가 위쪽에서 반대 방향으로 움직이는 동안 마우스를 향하는 카드가 있습니다. 이것은 멋지고 눈길을 끄는 효과를 만듭니다.

02. 큰 공개

  • 저자: 아담 쿤

애니메이션 콘텐츠 공개 효과는 현재 매우 인기있는 것으로 보이며 적절하게 사용하면 사용자 초점을 포착하고 청중의 참여를 유도 할 수 있습니다. 이전에 본 적이 있습니다. 색상 블록이 한쪽 또는 다른 쪽에서 가로 또는 세로로 자란 다음 반대쪽으로 후퇴하여 이번에는 아래에 텍스트 나 이미지가 나타납니다. 까다로워 보일 수 있지만 실제로는 몇 가지에만 의존하는 개념입니다.

먼저 요소 위치 지정 ( 여기에서 전체 코드를 다운로드하십시오. ) – 상대로 정의합니다 (이 경우 정적 만 실패합니다). 텍스트의 경우 약간의 패딩이 손상되지 않지만 자동 높이 및 너비를 허용하는 것이 가장 좋습니다. 시작 위치를 사용하려는 부모 요소의 경우 변환 원점도 정의합니다. 처음에는 요소를 숨기고 싶으므로 적절한 축을 따라 배율 변환을 사용하여 축소합니다.

다음으로, 부모를 마스킹하는 의사 요소로 변환 원점을 반대 옵션으로 설정합니다. 마지막으로 타이밍 함수 또는 지연을 사용하여 애니메이션을 함께 묶어 각각을 오프셋합니다.

참고로, 우리는 텍스트를 숨기는 상자에 요소 자체가 완전히보기에 맞게 조정 된 후에 만 ​​표시되도록하는 지연을 통해 부모 및 유사 요소의 애니메이션을 오프셋했습니다. 아래 Codepen을 확인하십시오.

03. 엇갈림

  • 저자: 아담 쿤

다양한 여유 스 니펫의 적절한 라이브러리를 모으기 시작했으면 애니메이션의 깊이를 향상시킬 다른 방법을 살펴볼 때입니다. 가장 좋은 방법 중 하나는 애니메이션 요소를 오프셋하는 것입니다.

포토샵을 더 빠르게 실행하는 방법

스크롤 위치를 기반으로 여러 애니메이션을 시작하도록 자바 스크립트 트리거를 설정하여 모든 항목이 동시에 효과적으로 움직이는 것을 찾는 것은 너무 일반적입니다. 다행히 CSS 자체는 애니메이션 경험을 만들거나 깨뜨릴 수있는 간단한 속성을 제공합니다. 애니메이션 지연 .

예를 들어 사용자가 스크롤 할 때 프레임에 애니메이션을 적용하려는 이미지 그리드가 있다고 가정 해 보겠습니다. 이를 트리거 할 수있는 방법에는 여러 가지가 있으며, 대부분 요소가 뷰포트에 들어갈 때 클래스를 추가 할 수 있습니다. 그러나 이는 브라우저에서 상당히 큰 부담이 될 수 있으며 컨테이너 요소에 단일 클래스를 추가하고 하위 요소에 애니메이션 지연을 정의하면 방지 할 수 있습니다.

이것은 SCSS 또는 LESS와 같은 전처리기에 대한 특히 좋은 사용 사례입니다. @에 대한 루프를 통해 각 요소를 반복합니다.

#parent{ .child{ animation: animationName 1.5s ease-in-out 1 forwards; @for $i from 1 through 20{ &:nth-of-type(#{$i}){ animation-delay:#{$i/10}s; } } } }

여기에서 SCSS를 사용하여 각 항목을 반복 할 수 있습니다. : nth-of-type 그런 다음 각 하위 요소의 숫자 값에 따라 애니메이션 지연을 적용합니다. 이 경우 각 증가분을 1 초로 줄이기 위해 타이밍을 나눕니다. 애니메이션 요소를 상쇄하면 애니메이션에 감정을 더할 수 있지만 너무 오래 지연되면 분리 된 느낌이들 수 있습니다. 아래에서이 CodePen을 확인하십시오.

04. 스 퀴글 비전

  • 저자: 아담 쿤

SVG 필터는 자연스럽고 손으로 그린 ​​느낌을 얻고 CSS만으로는 평면 느낌의 렌더링 제약을 피할 수있는 좋은 방법을 제공합니다. 애니메이션을 적용하면 효과를 더욱 향상시킬 수 있습니다.

적절한 사례 : Squigglevision. 예, 이것은 대부분의 애니메이터에게 알려진 기술 용어는 아니지만 확실히 만화에 사용되는 것을 보셨을 것입니다. 아이디어는 이러한 애니메이션 요소의 가장자리가 다소 들쭉날쭉하고 거칠게 깎일뿐만 아니라 이러한 거친 가장자리가 프레임별로 빠르게 변하여 마치 스케치북의 페이지에서 찢어져 가져온 것처럼 느껴지도록하는 것입니다. 생명.

이 효과를 얻기 위해 여러 필터와 각각의 난류 수준에 약간의 변화를주는 SVG를 페이지에 포함 할 수 있습니다. 다음으로 애니메이션 타임 라인을 설정하여 자체 키 프레임에서 각 필터를 호출합니다. 애니메이션이 '엄청나게'느껴질 것으로 예상되기 때문에 타이밍 지속 시간으로 재생하는 것이 중요하지만 너무 느리게 느리게 느껴지거나 미쳐 버릴 정도로 빠른 것은 원하지 않습니다.

이를 위해 CSS에는 난류 및 크기 조정과 같은 속성에 액세스 할 수있는 방법이 없기 때문에 SVG 필터간에 원활하게 전환 할 수있는 기능이 없으므로 이러한 유형의 애니메이션은 항상 고르지 않을 것으로 예상되어야합니다.

05. 텀블링 레터링

CSS 애니메이션 : 텀블링 레터링

Google의 올해의 게임은 홈페이지에 제목 단어가 서로 부딪 히고 부딪히는 재미있는 CSS 애니메이션을 제공합니다. 방법은 다음과 같습니다.

첫 번째 단계는 HTML로 웹 페이지 문서를 정의하는 것입니다. 헤드 및 본문 섹션을 저장하는 HTML 문서 컨테이너로 구성됩니다. head 섹션은 외부 CSS 및 JavaScript 리소스를로드하는 데 사용되지만 본문은 페이지 콘텐츠를 저장하는 데 사용됩니다.

Off Kilter Text Animation

The Animated Title

The Animated Title

The Animated Title

페이지 콘텐츠는 애니메이션 효과의 다양한 변형을 보여주는 3 개의 h1 제목 태그로 구성됩니다. 이러한 태그에 텍스트를 삽입 할 수 있지만 해당 애니메이션은 클래스 속성의 이름으로 정의됩니다. 이러한 클래스 이름에 대한 프레젠테이션 및 애니메이션 설정은 나중에 CSS에서 정의됩니다.

다음으로 ' code.js '. 모든 페이지 요소를 생기 있는 클래스를 만들고 정렬 내부 텍스트의 각 단어를 나타내는 목록입니다. 초기 애니메이션 지연도이 단계에서 정의됩니다. 페이지가 완전히로드 될 때까지 페이지 콘텐츠를 사용할 수 없으므로이 코드는 창의 하중 이벤트 리스너.



애니메이션 항목의 단어 내용은 스팬 요소. 이를 위해 기존 HTML 콘텐츠를 공백으로 재설정 한 다음 루프를 사용하여 식별 된 '단어'목록의 단어를 범위 요소로 만듭니다. 또한 animationDelay 스타일이 적용됩니다 – 초기 지연 (아래에 지정됨) 및 단어의 색인 위치와 관련하여 계산됩니다.



window.addEventListener('load', function(){ var delay = 2; var nodes = document.querySelectorAll ('.animate'); for(var i=0; i

라는 새 파일을 만듭니다. styles.css . 이제 애니메이션의 모든 단어 요소의 일부가 될 표현 규칙을 설정하고 span 태그로 제어합니다. 중앙 텍스트 정렬과 결합 된 블록으로 표시하면 각 단어가 컨테이너 중앙에 수평으로 정렬 된 별도의 줄에 나타납니다. 상대 위치 지정은 해당 항목과 관련된 애니메이션에 사용됩니다. 텍스트 흐름 위치.

.animate span{ display: block; position: relative; text-align: center; }

뒤로 및 앞으로 클래스가있는 애니메이션 요소에는 특정 애니메이션이 적용됩니다. 이 단계는 부모 컨테이너에 생기 있는뒤로 또는 앞으로 수업.



포토샵에서 3D 텍스트를 편집하는 방법

사이에 공간이 없는지 생기 있는뒤로 클래스 참조, 즉 부모 요소에는 둘 다 있어야합니다.

.animate.backwards > span{ animation: animateBackwards 1s ease-in-out forwards; } .animate.forwards > span{ animation: animateForwards 1s ease-in-out forwards; }

혼합 애니메이션은 앞으로 및 뒤로 애니메이션에 사용 된 것과 동일한 설정을 사용하여 정의됩니다. 애니메이션을 부모의 모든 자식에 적용하는 대신 n 번째 아이 선택기는 대체 애니메이션 설정을 적용하는 데 사용됩니다. 뒤로 애니메이션은 모든 조차 -number 자식, 앞으로 애니메이션은 모든 이상한 -숫자 자식.

.animate.mixed > span:nth-child(even){ animation: animateBackwards 1s ease-in-out forwards; } .animate.mixed > span:nth-child(odd){ animation: animateForwards 1s ease-in-out forwards; }

방금 만든 애니메이션은 이니셜 ' ...에서 '시작 위치, 수직 위치 또는 회전 조정 없음. ' ...에 'position은 조정 된 수직 위치 및 회전 상태로 요소를 설정하는 애니메이션의 최종 상태입니다. 혼합 애니메이션에서 겹침으로 인해 텍스트를 읽을 수 없게되는 것을 방지하기 위해 두 애니메이션에 약간 다른 종료 설정이 사용됩니다.



@keyframes animateForwards { from { top: 0; transform: rotate(0deg); } to { top: .9em; transform: rotate(-15deg); } } @keyframes animateBackwards { from { top: 0; transform: rotate(0deg); } to { top: 1em; transform: rotate(25deg); } }

06. 플립 북

  • 저자: 아담 쿤

CSS로 애니메이션을 만들 때 때로는 단순한 접근 방식이 필요합니다. 그리고 플립 북보다 더 간단한 애니메이션 방법이 거의 없습니다. 사용 단계 () 타이밍 함수로이 효과를 복제 할 수 있습니다. 이것은 고르지 않게 들릴 수 있고 유동성을 유지하려는 우리의 사명과 직접적으로 모순 될 수 있지만, 적절한 속도로 매끄럽게 유기적으로 느낄 수 있습니다.

그래서 어떻게 작동합니까? 몇 개의 추가 매개 변수 만 사용하여 애니메이션 완화 기능을 정의합니다. 애니메이션에 필요한 단계 수와 시작하려는 첫 번째 단계의 시점을 알려줍니다. (시작, 끝) -예를 들어 조금 이렇게 생겼습니다. 단계 (10, 시작) .

이제 키 프레임 내에서 애니메이션의 끝점을 지정할 수 있습니다.이 예에서는 애니메이션 길이가 10 초이고 10 단계를 사용한다고 가정합니다. 이 경우 각 단계의 길이는 1 초이며 전환없이 다음 1 초 프레임으로 즉시 이동합니다.

다시 말하지만 이것은 유동성면에서 날아가는 것처럼 보이지만 여기에서 계단식 애니메이션이 실제로 빛을 발할 수 있습니다. 스프라이트 시트를 점진적으로 반복하고 플립 북처럼 프레임별로 애니메이션을 적용 할 수 있습니다. 동일한 크기의 프레임을 정의하지만 단일 수평 (또는 수직) 이미지로 컴파일함으로써이 이미지를 요소 배경으로 설정하고 픽셀 또는 백분율 배경 위치를 애니메이션의 끝점으로 정의하여 각 프레임에 대해 단일 단계를 허용 할 수 있습니다. 틀. 그러면 스프라이트 시트가 위치를 기반으로 한 새로운 배경 이미지로 프레임별로 요소를 이동하고 채 웁니다.

예를 살펴 보겠습니다. 이 경우 일부 텍스트 문자에 추가 된 애니메이션 다리 세트가 있습니다. 먼저 애니메이션 이름, 기간, 단계 수, 시작 위치 및 반복 횟수를 정의합니다.

animation:runner 0.75s steps(32, end) infinite;

다시 말하지만, 지속 시간은 총 32 개 프레임에 대해 1 초 미만으로 비교적 빠릅니다. 다음으로 키 프레임을 정의합니다.

@keyframes runner{ from{ background-position:0px 50%;} to{ background-position:- 1280px 50%; }}

이미지의 세로 위치는 전체적으로 일관되며, 이는 스프라이트가 이미지 전체에 가로로 늘어난 총 너비가 1280px임을 의미합니다. 해당 이미지에 대해 총 32 개의 프레임을 정의 했으므로 각 프레임의 너비는 40px이어야한다고 추론 할 수 있습니다. 아래에서이 Codepen을 확인하십시오.

큰 스프라이트 시트는 잠재적으로 성능에 심각한 영향을 줄 수 있으므로 이미지 크기를 조정하고 압축해야합니다. 잘 만들어진 스프라이트 시트와 적절한 애니메이션 지속 시간으로 이제 복잡한 동작을 전달할 수있는 부드러운 애니메이션을 얻을 수 있습니다.

07. 거품 불기

7UP에 등장하는 CSS 버블 애니메이션은 브랜드 테마를 웹 사이트 디자인에 적용한 아름다운 예입니다. 애니메이션은 거품의 SVG '그리기'와 각 거품에 적용된 두 개의 애니메이션 등 몇 가지 요소로 구성됩니다.

첫 번째 애니메이션은 버블의 불투명도를 변경하고 뷰 상자에서 수직으로 이동합니다. 두 번째는 사실감을 더하기 위해 흔들리는 효과를 만듭니다. 오프셋은 각 버블을 대상으로하고 다른 애니메이션 기간과 지연을 적용하여 처리됩니다.

거품을 만들기 위해 우리는 SVG . SVG에서 우리는 두 개의 거품 레이어를 만듭니다. 하나는 큰 거품 용이고 다른 하나는 작은 거품 용입니다. SVG 내에서 모든 버블을 뷰 박스의 하단에 배치합니다.

... ...

transform 속성을 사용하여 SVG에 두 개의 개별 애니메이션을 적용하려면 애니메이션을 별도의 요소에 적용해야합니다. 그만큼 SVG의 요소는 HTML의 div와 매우 유사하게 사용할 수 있습니다. (이미 그룹에있는) 각 버블을 그룹 태그로 감싸 야합니다.

CSS에는 복잡한 애니메이션을 생성하기위한 강력한 애니메이션 엔진과 매우 간단한 코드가 있습니다. 애니메이션의 시작과 끝에서 버블을 페이드 인 / 아웃하기 위해 화면 위로 버블을 이동하고 불투명도를 변경하는 것으로 시작합니다.

@keyframes up { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1024px); } }

흔들리는 효과를 만들기 위해, 우리는 단지 적절한 양만큼 거품을 좌우로 이동 (또는 변환)하면됩니다. 너무 많으면 애니메이션이 너무 깜짝 놀라게되고 연결이 끊어지고 너무 적 으면 대부분 눈에 띄지 않게됩니다. 애니메이션 작업을 할 때는 실험이 핵심입니다.

@keyframes wobble { 33% { transform: translateX(-50px); } 66% { transform: translateX(50px); } }

애니메이션을 거품에 적용하기 위해 이전에 사용한 그룹과 도움말을 사용합니다. n 번째 유형 각 버블 그룹을 개별적으로 식별합니다. 먼저 거품에 불투명도 값을 적용하고 바뀔 것이다 하드웨어 가속을 활용하기 위해 속성.

.bubbles-large > g { opacity: 0; will-change: transform, opacity;} .bubbles-large g:nth-of-type(1) {...} ... .bubbles-small g:nth-of-type(10) {...}

우리는 모든 애니메이션 시간과 지연을 서로 몇 초 내에 유지하고 무한 반복하도록 설정하려고합니다. 마지막으로 우리는 이즈 인 아웃 좀 더 자연스럽게 보이도록 흔들림 애니메이션에 타이밍 기능을 추가했습니다.

.bubbles-large g:nth-of-type(1) { animation: up 6.5s infinite; } .bubbles-large g:nth-of-type(1) circle { animation: wobble 3s infinite ease-in-out; } ... bubbles-small g:nth-of-type(9) circle { animation: wobble 3s 275ms infinite ease-in-out; } .bubbles-small g:nth-of-type(10) { animation: up 6s 900ms infinite;}

08. 스크롤링 마우스

미묘한 스크롤 마우스 애니메이션은 사용자가 웹 사이트에 처음 방문 할 때 방향을 제시 할 수 있습니다. HTML 요소와 속성을 사용하여이 작업을 수행 할 수 있지만 드로잉에 더 적합하므로 SVG를 사용할 것입니다.

SVG 내부에는 모서리가 둥근 사각형과 애니메이션 할 요소에 대한 원이 필요합니다. SVG를 사용하여 필요한 크기로 아이콘을 조정할 수 있습니다.

이제 SVG를 만들었으므로 컨테이너 내 아이콘의 크기와 위치를 제어하기 위해 몇 가지 간단한 스타일을 적용해야합니다. 마우스 SVG 주위에 링크를 감아 화면 하단에 배치했습니다.

.scroll-link { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); } .mouse { max-width: 2.5rem; width: 100%; height: auto; }

다음으로 애니메이션을 만들겠습니다. 애니메이션의 0 ~ 20 %에서 요소가 시작될 때 상태를 설정하려고합니다. 통과의 20 %로 설정하면 무한히 반복 될 때 일정 시간 동안 가만히 있습니다.

@keyframes scroll { 0%, 20% { transform: translateY(0) scaleY(1); } }

불투명 시작점을 추가 한 다음 애니메이션의 끝인 100 % 표시에서 Y 위치와 수직 배율을 모두 변환해야합니다. 마지막으로해야 할 일은 원을 희미하게하기 위해 불투명도를 낮추는 것입니다.

@keyframes scroll { ... 10% { opacity: 1; } 100% { transform: translateY(36px) scaleY(2); opacity: 0.01; } }

마지막으로 애니메이션을 'transform-origin'속성과 함께 원에 적용합니다. 바뀔 것이다 하드웨어 가속을 허용하는 속성입니다. 애니메이션 속성은 매우 자명합니다. 그만큼 입방 베 지어 타이밍 기능은 원을 마우스 모양의 맨 아래에 놓기 전에 먼저 뒤로 당기는 데 사용됩니다. 이것은 애니메이션에 장난기있는 느낌을 추가합니다.

.scroll { animation-name: scroll; animation-duration: 1.5s; animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500); animation-iteration-count: infinite; transform-origin: 50% 20.5px; will-change: transform; }

09. 애니메이션 글쓰기

CSS 애니메이션 : 쓰기

나는 디자이너가되고 싶다
실제 애니메이션을 보려면 클릭하십시오.

Garden Eight 웹 사이트는 텍스트가 쓰여진 것처럼 보이는 일반적인 애니메이션 기법을 사용합니다. 효과를 얻기 위해 SVG로 전환합니다. 먼저 SVG를 만들겠습니다. 여기에는 두 가지 방법이 있습니다. 애니메이션을 적용하거나 SVG 텍스트를 사용하기 위해 텍스트를 경로로 변환하는 것입니다. 두 방법 모두 장단점이 있습니다.

키 프레임 애니메이션을 만들어 시작합니다. 수행하는 데 필요한 유일한 기능은 스트로크 대시 오프셋 . 이제 애니메이션을 만들었으므로 애니메이션 할 값을 적용해야합니다. 우리는 뇌졸중 Dasharray , 획에 간격이 생깁니다. 획을 전체 요소를 덮을만큼 충분히 큰 값으로 설정하고 마지막으로 획 길이만큼 대시를 오프셋하려고합니다.

마법은 애니메이션을 적용 할 때 발생합니다. 오프셋을 애니메이션하여 획을보기로 가져와 그리기 효과를 만듭니다. 한 요소를 그리는 끝과 다음 요소를 그리기 시작하는 부분이 겹치면서 요소가 한 번에 하나씩 그려지기를 원합니다. 이를 달성하기 위해 우리는 Sass / SCSS 및 n 번째 유형 애니메이션 길이의 절반만큼 각 문자를 지연시키고 해당 문자의 위치를 ​​곱합니다.

10. 비행 새

완전히 직선 인 벡터 라인으로 시작하여 애니메이션의 각 프레임을 그리고 다른 비행 상태에있는 새를 묘사합니다. 그런 다음 벡터 포인트를 조작하고 선과 모서리를 둥글게 만듭니다. 마지막으로 각 프레임을 동일한 크기의 상자에 넣고 나란히 배치합니다. 파일을 SVG로 내 보냅니다.

HTML 설정은 정말 간단합니다. 여러 애니메이션을 적용하려면 각 새를 컨테이너에 포장하면됩니다. 하나는 새를 날리게하고 다른 하나는 화면을 가로 질러 이동합니다.

새 SVG를 새 div의 배경으로 적용하고 각 프레임이 원하는 크기를 선택합니다. 너비를 사용하여 새 배경 위치를 대략적으로 계산합니다. SVG에는 10 개의 셀이 있으므로 너비에 10을 곱한 다음 올바르게 보일 때까지 숫자를 약간 변경합니다.

.bird { background-image: url('bird.svg'); background-size: auto 100%; width: 88px; height: 125px; will-change: background-position; } @keyframes fly-cycle { 100% { background-position: -900px 0; } }

CSS 애니메이션에는 여러분이 알지 못하는 몇 가지 트릭이 있습니다. 우리는 애니메이션 타이밍 기능 애니메이션을 암시하기 위해 노트북의 페이지를 넘기는 것과 매우 유사합니다.

animation-name: fly-cycle; animation-timing-function: steps(10); animation-iteration-count: infinite; animation-duration: 1s; animation-delay: -0.5s;

이제 우리는 비행주기를 만들었습니다. 새는 현재 날개를 펄럭이지만 아무데도 가지 않습니다. 그녀를 화면에서 이동하기 위해 다른 키 프레임 애니메이션을 만듭니다. 이 애니메이션은 새가 화면을 가로 질러 가로로 이동하는 동시에 세로 위치와 배율을 변경하여 새가보다 사실적으로 구불 구불하게 이동할 수 있도록합니다.

애니메이션을 만든 후에는 적용하기 만하면됩니다. 새의 여러 사본을 만들고 다른 애니메이션 시간과 지연을 적용 할 수 있습니다.

.bird--one { animation-duration: 1s; animation-delay: -0.5s; } .bird--two { animation-duration: 0.9s; animation-delay: -0.75s; }

11. 내 햄버거 교차

이 애니메이션은 웹 전체에서 사용되며 세 줄을 십자형 또는 닫기 아이콘으로 바꿉니다. 최근까지 대부분의 구현은 HTML 요소를 사용하여 이루어졌지만 실제로 SVG는 이러한 종류의 애니메이션에 훨씬 더 적합합니다. 더 이상 여러 범위로 버튼 코드를 부 풀릴 필요가 없습니다.

애니메이션 가능한 특성과 SVG 및 탐색 가능한 DOM으로 인해 애니메이션 또는 전환을 수행하는 코드는 거의 변경되지 않습니다. 기술은 동일합니다.

div 내부 또는 SVG 내부 경로에 걸쳐있는 네 가지 요소를 만드는 것으로 시작합니다. 스팬을 사용하는 경우 CSS를 사용하여 div 내부에 배치해야합니다. SVG를 사용하는 경우 이미 처리 된 것입니다. 라인 2와 3을 중앙에 배치하고, 라인 1과 4는 위아래로 균등하게 간격을두고 변환 원점을 중앙에 배치합니다.

우리는 불투명도와 회전이라는 두 가지 속성을 전환하는 데 의존 할 것입니다. 우선, 1 번과 4 번 줄을 페이드 아웃하려고합니다. : nth-child 선택자.

.menu-icon.is-active {element-type}:nth-child(1), .menu-icon.is-active {element-type}:nth-child(4) { opacity: 0; }

남은 것은 두 개의 중간 선을 대상으로하고 반대 방향으로 45도 회전하는 것뿐입니다.

.menu-icon.is-active {element-type}:nth-child(2) { transform: rotate(45deg); } .menu-icon.is-active {element-type}:nth-child(3) { transform: rotate(-45deg); }

12. 서클 쫓기

애니메이션 로딩 아이콘은 4 개의 원으로 구성됩니다. 원에는 채우기가 없지만 획 색상이 번갈아 나타납니다.

CSS에서 모든 원에 몇 가지 기본 속성을 설정 한 다음 : nth-of-type 선택기를 사용하여 다른 뇌졸중 Dasharray 각 원에.

circle:nth-of-type(1) { stroke-dasharray: 550; } circle:nth-of-type(2) { stroke-dasharray: 500; } circle:nth-of-type(3) { stroke-dasharray: 450;} circle:nth-of-type(4) { stroke-dasharray: 300; }

다음으로 키 프레임 애니메이션을 만들어야합니다. 애니메이션은 정말 간단합니다. 원을 360도 회전하기 만하면됩니다. 애니메이션의 50 % 표시에 변형을 배치하면 원도 원래 위치로 다시 회전합니다.

@keyframes preloader { 50% { transform: rotate(360deg); } }

애니메이션이 생성되었으므로 이제 서클에 적용하면됩니다. 애니메이션 이름을 설정합니다. 지속; 반복 횟수 및 타이밍 기능. 'ease-in-out'은 애니메이션에 더 재미있는 느낌을 줄 것입니다.

animation-name: preloader; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;

현재 로더가 있지만 모든 요소가 동시에 회전하고 있습니다. 이 문제를 해결하기 위해 약간의 지연을 적용합니다. Sass for 루프를 사용하여 지연을 생성합니다.

@for $i from 1 through 4 { &:nth-of-type(#{$i}) { animation-delay: #{$i * 0.15}s; } }

지연으로 인해 이제 원이 차례로 애니메이션되어 서로 쫓는 원의 환상을 만듭니다. 이것의 유일한 문제는 페이지가 처음로드 될 때 원이 고정 된 다음 한 번에 하나씩 이동하기 시작한다는 것입니다. 동일한 오프셋 효과를 얻을 수 있지만 단순히 지연을 음수 값으로 설정하여 애니메이션에서 원치 않는 일시 중지를 중지합니다.

animation-delay: -#{$i * 0.15}s;

다음 페이지 : 탐색 할 더 많은 CSS 애니메이션 예제

현재 페이지: CSS 애니메이션 튜토리얼

다음 페이지 CSS 애니메이션 효과