@keyframes

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

CSS 애니메이션 초보자 입문서

https://webclub.tistory.com/621?category=541913

CSS 애니메이션(Animation), 키프레임(keyframes)

 

 

 

 

 

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

 

 

 

여러개의 애니메이션

복수의 애니메이션을 추가하려면 쉼표를 사용하여 분리하세요. 예를들어 아까 만든 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);   } }v

 

 

 

 

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 */ }