CSS 애니메이션

제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다.
또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다.

---

animation(애니메이션)

애니메이션은 특정 지점에서 스타일을 바꾸는 방법이며 @keyframes 속성으로 정의하고 animation속성과 그 하위 속성으로 실행 시간이나 반복 여부 등을 결정한다.

@keyframes

기본형

@keyframes <이름> { <선택자> { <스타일>} } 

이다. 여기서 선택자는 스타일 속성값이 바뀌는 지점을 가르키고 %단위를 사용하여 나타낸다. 시작과 끝을 나타낼 수 있는 0% 와 100%는 각각 from과 to를 대신 사용한다.

animation-delay

트렌지션과 마찬가지로 초(s)나 밀리초(ms) 값을 이용해 시작 시간을 늦출 수 있다.

animation-direction

기본형

animation-direction: normal | reverse | alternate | alternate-reverse

방향을 지정하는 속성이며 다양한 속성 값을 가질 수 있다.

• normal - from에서 to로 정방향으로 진행한다.(기본값)
• reverse - to에서 from으로 반대 방향으로 진행한다.
• alternate - 홀수 번째는 noraml , 짝수 번째는 reverse 값을 갖는다.
• alternate-reverse - 홀수 번째는 reverse, 짝수 번째는 normal 값을 갖는다.

animation-duration

기본형

animation-duration : <시간>

사용할 수 있는 단위는 초(s)와 밀리초(ms)가 있으며 기본값이 0으로 지정되어 있어 따로 속성값을 정하지 않는다면 애니메이션은 실행되지 않는다.

animation-iteration-count

기본형

animation-iteration-count: <숫자> | infinite

반복 횟수를 입력 할 수 있으며 infinite 속성 값을 통해 무한 반복할 수 있다.

animation-name

기본형

animation-name : <키프레임 이름> | none

앞서 언급한 @keyframes 속성에 <이름> 값을 입력하여 지정 요소에 어떤 애니메이션을 추가할 지 지정한다.

animation-timing-function

트랜지션과 동일하게 시작, 중간, 끝에 속도를 지정하여 속도 곡선을 만들 수 있다. 속성 값은 트랜지션과 동일하다.

animation

앞선 모든 속성을 animation 속성 하나에 표기할 수 있다. 또한 하나의 요소에 2개 이상에 애니메이션을 실행할 때 쉼표(,)를 통해 지정할 수 있다.

예시 소스

@keyframes change {
    from {
        border: 1px solid rgba(0,0,0,0.1); 
         }
      to { 
        border: 1px solid #f00
        border-radius: 50%;
        }

.class {
    background-color: #4cffoo ;
    border: 1px solid rgba(0,0,0,0.1);
    animation-name: change;
    animation-duration: 3s;
    animation-iteraction-count: infinite;
    animation-direction: alternate; 

소스에 애니메이션 속성을
animation: change 3s infinite alternate; 로 줄여 작성할 수 있다.