[CSS] animation

@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);   } }

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