[스크랩] @keyframes와 애니메이션

출처 : http://webdesign.tutsplus.com/ko/tutorials/a-beginners-introduction-to-css-animation--cms-21068

예제 : http://plnkr.co/edit/35HfLWfs71dnPHzULZU8

요즘에는 점점 더 많은 웹사이트들이 GIF, SVG, WebGL, 배경 비디오 등의 형태를 이용하여 애니메이션을 사용하고있습니다. 제대로 사용한다면 웹 상의 애니메이션들은 웹사이트의 활력을 불어넣고 상호작용을 이끌어낼 수 있으며 이는 별도의 피드백 요소와 경험을 사용자에게 추가로 제공하는 역할을 할 수 있을 것입니다.

이 튜토리얼에서는 CSS 애니메이션을 소개할 것입니다. CSS 애니메이션은 높은 성는 기준에 맞는 방법으로브라우져 지원이 좋아지면서 점점 더 인기를 얻어가고 있습니다. 기초를 다지면서 우리는 한가지 빠른 예시로 사각형을 동그라미 요소로 변형시켜 볼 것입니다.

@keyframes 와 애니메이션 소개

CSS 애니메이션에서 가장 중요한 요소는 @keyframes 입니다. @keyframes는 CSS 문법 중 하나로 애니메이션이 만들어지는 부분입니다. @keyframes 를 타임라인 안의 하나의 스테이지(구간)들 이라고 생각하세요.@keyframes 안에서 우리는 스테이지들을 정의하고 각 구간마다 다른 스타일을 적용 시킬 수 있습니다.

다음으로 CSS 애니메이션이 작동하도록 @keyframes 를 선택자로 묶어주세요. 이것은 마지막에 @keyframes 선언 안의 모든 코드를 분석하고 초기의 스타일을 각 스테이지에 따라 새로운 스타일로 변경시킬 것입니다.

@keyframes

여기서 우리는 애니메이션 스테이지들을 정할 것입니다. 우리의 @keyframes 속성은:

• 우리가 정한 이름 (여기서는 tutsFade로 정했습니다)
• 스테이지: 0%-100%; from (0%와 같음) 그리고 to (100%와 같음)
• CSS 스타일: 각 구간에 적용시킬 스타일

예를 들어:

1 2 3 4 5 6 7 8

@keyframes tutsFade {   0% {     opacity: 1;   }   100% {     opacity: 0;   } }

혹은:

1 2 3 4 5 6 7 8

@keyframes tutsFade {   from {     opacity: 1;   }   to {     opacity: 0;   } }

또는 줄여서 쓸 수도 있습니다.

1 2 3 4 5

@keyframes tutsFade {   to {     opacity: 0;   } }

상단의 코드는 엘레멘트의 투명도를 opacity: 1에서 opacity: 2로 변하게 합니다. 위의 세가지 방법 모두 동일한 결과로 나옵니다.

Animation

animation 속성은 예전에 @keyframes로 불리며 CSS 선택자 안에서 존재했었습니다. 애니메이션은 여러개의 속성을 가질 수 있습니다.

• animation-name: @keyframes 이름 (예시에서는 tutsFade를 사용함)
• animation-duration: 타임프레임 길이. 애니메이션 시작부터 마지막까지 총 지속시간
• animation-timing-function: 애니메이션 속도 조절 ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
• animation-delay: 애니메이션이 시작하기 전 지연시간
• animation-iteration-count: 반복 횟수
• animation-direction: 루프 (loop) 방향. 정방향으로 반복, 역방향으로 반복, 번갈아가며 반복 등을 설정
• animation-fill-mode: 애니메이션 시작/끝 상태 제어 ( none | forwards | backwards | both )

예를 들어:

1 2 3 4 5 6 7 8

.element {   animation-name: tutsFade;   animation-duration: 4s;   animation-delay: 1s;   animation-iteration-count: infinite;   animation-timing-function: linear;   animation-direction: alternate; }

혹은 짧게:

1 2 3

.element {   animation: tutsFade 4s 1s infinite linear alternate; }

상단의 코드는 1초의 지연시간 후 4초의 총 애니메이션 길이를 가지고 loop 방향을 번갈아가면서 선형 속도로 무한 반복 깜빡거리는 효과를 만들 것입니다.

Vendor Prefixes 더하기

작업 초안을 만드는동안, 우리는 브라우저에 맞는 프리픽스를 사용하여 브라우저 지원이 가능한 잘되도록 합니다. 기본 프리픽스들을 달아줍니다:

• 크롬 & 사파리: -webkit-
• 파이어폭스: -moz-
• 오페라: -o-
• 인터넷 익스플로러: -ms-

animation 속성을 벤더 프리픽스와 함께 사용하면 이렇게 됩니다:

1 2 3 4 5 6 7

.element {     -webkit-animation: tutsFade 4s 1s infinite linear alternate;     -moz-animation: tutsFade 4s 1s infinite linear alternate;     -ms-animation: tutsFade 4s 1s infinite linear alternate;     -o-animation: tutsFade 4s 1s infinite linear alternate;     animation: tutsFade 4s 1s infinite linear alternate; }

@keyframes 옆에도 붙여 줍니다:

1 2 3 4 5

@-webkit-keyframes tutsFade { /* your style */ } @-moz-keyframes tutsFade { /* your style */ } @-ms-keyframes tutsFade { /* your style */ } @-o-keyframes tutsFade { /* your style */ } @keyframes tutsFade { /* your style */ }

가독성을 위해서 이 글에서는 프리픽스를 생략하겠습니다. 하지만 마지막 결과물에서는 프리픽스를 포함하고 여러분도 CSS 코드에 프리픽스를 넣는 것을 추천합니다.

벤더 프리픽스에 대해 더 알고싶으신 분들은 http://css3please.com/ 를 참고하세요.

여러개의 애니메이션

복수의 애니메이션을 추가하려면 쉼표를 사용하여 분리하세요. 예를들어 아까 만든 tutsFade에 회전을 추가하고 싶으면 @keyframes를 하나 더 선언하고 엘레멘트에도 쉼표를 사용하여 추가로 묶어줍니다.

01 02 03 04 05 06 07 08 09 10 11 12 13 14

.element {   animation: tutsFade 4s 1s infinite linear alternate,              tutsRotate 4s 1s infinite linear alternate; } @keyframes tutsFade {   to {     opacity: 0;   } } @keyframes tutsRotate {   to {     transform: rotate(180deg);   } }

사각형에서 동그라미 강좌

위의 기본 규칙들을 이용해 사각형에서 동그라미로 간단하게 애니메이션을 만들어 보겠습니다. 우리는 총 다섯개의 구간을 만들어 각각의 스테이지마다 다른 외곽선 둥글기, 회전, 배경색을 정의할 것입니다. 더 긴 설명 대신에 바로 코드를 보겠습니다.

기본 엘레멘트

먼저 임시로 움직일 대상을 만들겠습니다. 클래스 이름은 생략하고 평범한 div를 우선 사용하기로 합니다.

1	<div></div>

엘레멘트 선택자를 div {} 이용해 div에 기본 스타일을 줍니다.

1 2 3 4 5

div {   width: 200px;   height: 200px;   background-color: coral; }

키프레임 선언하기

이제 5개의 스테이지를 가진 @keyframes을 준비합니다. 키프레임 이름은 square-to-circle 으로 정하였습니다.

1 2 3 4 5 6 7

@keyframes square-to-circle {   0%{}   25%{}   50%{}   75%{}   100%{} }

우리는 스테이지마다 몇가지의 스타일을 정의해야 합니다. border-radius 값으로 사각형의 모서리를 조정하는 것부터 시작하려 합니다:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17

@-webkit-keyframes square-to-circle {   0%  {     border-radius:0 0 0 0;   }   25%  {     border-radius:50% 0 0 0;   }   50%  {     border-radius:50% 50% 0 0;   }   75%  {     border-radius:50% 50% 50% 0;   }   100% {     border-radius:50%;   } }

다음엔 각 스테이지마다 다른 background-color 를 선언해줍니다.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22

@keyframes square-to-circle {   0%  {     border-radius:0 0 0 0;     background:coral;   }   25%  {     border-radius:50% 0 0 0;     background:darksalmon;   }   50%  {     border-radius:50% 50% 0 0;     background:indianred;   }   75%  {     border-radius:50% 50% 50% 0;     background:lightcoral;   }   100% {      border-radius:50%;     background:darksalmon;   } }

한단계 넘어가 border-radius 와 background-color 외에 div를 회전시켜 시각적인 흥미를 끌어 봅니다.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

@keyframes square-to-circle {   0%  {     border-radius:0 0 0 0;     background:coral;     transform:rotate(0deg);   }   25%  {     border-radius:50% 0 0 0;     background:darksalmon;     transform:rotate(45deg);   }   50%  {     border-radius:50% 50% 0 0;     background:indianred;     transform:rotate(90deg);   }   75%  {     border-radius:50% 50% 50% 0;     background:lightcoral;     transform:rotate(135deg);   }   100% {      border-radius:50%;     background:darksalmon;     transform:rotate(180deg);   } }

애니메이션 적용하기

square-to-circle 애니메이션 정의가 끝났다면 이제 이것을 div에 적용합니다.

1 2 3 4 5 6

div {   width: 200px;   height: 200px;   background-color: coral;   animation: square-to-circle 2s 1s infinite alternate;  }

이 단계에서 우리는 animation 속성을 줄여서 넣었습니다. 다시 풀어서 설명하자면 이렇습니다:

• animation-name : 애니메이션 이름은 square-to-circle 입니다.
• animation-duration : 애니메이션 길이는 2s 입니다.
• animation-delay : 시작 전 딜레이는 1s 입니다.
• animation-iteration-count : 반복횟수는 infinite 으로 멈추지 않습니다.
• animation-direction : 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.

멋진 Timing-Function 기능 이용하기

마지막으로 추가할 수 있는 애니메이션 속성은 animation-timing-function 입니다. 이것은 속도를 정의하고 가속도나 감속도를 움직임에 더할 수 있습니다. 이 기능은 아주 자세한 값이 필요 할 수 있으며 그러므로 수동으로 직접 계산하기보다는 많은 무료 리소스 웹사이트를 사용하여 커스텀된 애니메이션 타이밍 기능을 이용하세요.

그중 하나인 CSS Easing Animation Tool 을 사용하여 타이밍 기능을 계산해 봅시다.

cubic-bezier function을 이용해 square-to-circle 예시에 탄성있는 고무공 같은 효과를 추가해 보려합니다.

핸들을 조작하여 베지어 곡선(bezier curve)을 원하는대로 만든 후 계산된 정보(snippet)로 애니메이션의 timing-function 값을 교체해 줍니다.

1 2 3 4 5 6

div {   width: 200px;   height: 200px;   background-color: coral;   animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate;  }

벤더 프리픽스를 생략한 완성된 코드는 다음과 같습니다:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

div {   width: 200px;   height: 200px;   background-color: coral;   animation: square-to-circle 2s .5s infinite cubic-bezier(1,.015,.295,1.225) alternate; }   @keyframes square-to-circle {   0%  {     border-radius:0 0 0 0;     background:coral;     transform:rotate(0deg);   }   25%  {     border-radius:50% 0 0 0;     background:darksalmon;     transform:rotate(45deg);   }   50%  {     border-radius:50% 50% 0 0;     background:indianred;     transform:rotate(90deg);   }   75%  {     border-radius:50% 50% 50% 0;     background:lightcoral;     transform:rotate(135deg);   }   100% {      border-radius:50%;     background:darksalmon;     transform:rotate(180deg);   } }

마지막 한가지

최신 브라우저들에서는 모두 잘 작동하지만, 파이어폭스에서는 변형하는 오브젝트를 형편없이 랜더링하는 나쁜 버릇이 있습니다. 아래 그림과 같이 삐죽삐죽한 라인처리를 말합니다.

운좋게도 이런 문제도 대응할 방법이 있습니다. 다음과 같이 div에 투명한 외곽선을 추가하면 파이어폭스에서도 완벽하게 랜더해 줍니다!

1	outline: 1px solid transparent;

결론

끝입니다! CSS Animation syntax를 이용해 간단한 반복하는 애니메이션을 만들어보았습니다.

Amazing Gallery:

15 Inspiring Examples of CSS Animation on CodePen

CSS3를 이용한 로딩 애니메이션