[ 애니메이션 페이지 만들기_2 ] < animation > 정리

첫번째 페이지인 애니메이션을 추가하면서 정말 알게 되 것이 많다.

하나하나 정리해 가면서 다시 복습해야겠다.

 

1. 애니메이션 추가하기

animation은 animation자체의 속성과 애니메이션 중간 상태를 정의할 수 있는 @keyframes로 구성되어 있다.

 

1.1 animation 속성

• animation-name
  애니메이션의 중간 상태를 지정하기 위한 이름을 정의하는 속성. 중간 상태는 @keyframes를 사용하여 정의한다.
  이름을 설정해야 애니메이션을 재생할 수 있다.(==호출)

• animation-duration
  한 싸이클의 애니메이션이 동작하는데 걸리는 시간을 지정.(==한번 재생하는 데 걸리는 시간)
  0이나 음수로 설정하면 애니메이션은 재생되지 않는다.

• animation-delay
  엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정한다.
  애니메이션의 시작을 지연하는 시간을 설정한다.

  • now ( == 0 ) : 속성을 적용하자마자 애니메이션을 시작한다.

  • 숫자 + 단위 : 설정한 시간이 지난 뒤에 애니메이션 시작. 값이 음수이면 속성을 적용한 순간 바로 애니메이션을 실행하지만, 지정한 시간 뒤의 장면부터 애니메이션이 재생된다.

• animation-direction
  애니메이션 재생방향을 설정하는 속성.(== 종료되고 다시 처음부터 시작할지 역방향으로 진행할지)

  • nomal : 순방향 재생(재생이 끝나면 첫번째 프레임부터 다시 시작)

  • alternate : 순방향으로 시작해 역 / 순 방향을 번갈아가며 재생.

  • reverse : 역방향으로 재생 ( 재생이 끝나면 마지막 프레임부터 다시 시작)

  • alternate-reverse : 역방향으로 시작해 순/ 역 방향을 번갈아가며 재생.

• animation-iteration-count
  애니메이션이 재생 횟수 설정. infinite 로 지정하여 무한히 반복할 수 있다.

• animation-play-state
  애니메이션을 멈추거나 다시 시작할 수 있다.

  • running : 애니메이션을 재생.

  • pause : 애니메이션을 정지.

• animation-timing-function
  중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정.

  • linear : 등속

  • ease : 빨라졌다 다시 느려짐

  • ease-in : 점점 빨라짐

  • ease-in-out : 처음과 끝이 느림

  • ease-out : 점점 느려짐

• animation-fill-mode
  애니메이션이 시작되기 전이나 끝나고 난 후의 상태를 설정.

  • none : from에 설정한 스타일을 적용하지않고 실행 전 상태로 되돌리고 종료.

  • forwards : from에 설정한 스타일을 적용하지 않고 애니메이션이 끝난 상태 그대로 종료.

  • backwards : from에서 설정한 스타일을 적용하고 애니메이션 실행 전 상태로 되돌리고 종료.

  • both : from에서 설정한 스타일을 적용하고 애니메이션이 끝난 상태 그대로 종료.

 

 

1.2 @keyframes

애니메이션을 재생할 각 프레임의 스타일을 정의하는 것으로 from or 0% 속성에 설정한 스타일에서 to or 100% 속성에 설정한 스타일로 바뀌면서 애니메이션이 재생이 된다.

[ Syntax ]

@keyframes animationName { 
    from { 
        css-styles; 
    } 
    to { 
        css-styles; 
    } 
}

@keyframes move { 
    0% { 
        top: 0px;
    }
    25%{
        top: 20px;
    }
    75%{ 
        top: 175px; 
    }
    100%{ 
        top: 200px; 
    } 
}

-> 해당 %는 마음대로 조정이 가능하다.

 

 

 

 

 

 

<참고한 사이트 >

https://webclub.tistory.com/621

https://ponyozzang.tistory.com/207