animation

animation

CSS3 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다.

// 단일 속성
.div {
    animation-name : name;
    animation-duration : 2s;
    animation-delay : 5s;
    animation-direction : alternate;
    animation-iteration-count: 3; 
    animation-play-state: paused; 
    animation-timing-function: 1s; 
    animation-fill-mode: both;
}
// 속기형
animation : name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state;

 

• animation-name : 애니메이션 중간 상태를 지정하기 위한 이름을 정의합니다. 중간 상태는 @keyframes 사용
• animation-duration : 한 싸이클의 애니메이션이 얼마나 걸쳐 일어날지 지정합니다.
• animation-delay : 로드되고 나서 언제 애니메이션이 시잘될지 지정합니다.
• animation-direction : 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진해할지 지정합니다.
• animation-iteration-count : 애니메이션이 몇번 반복될지 지정합니다.
• animation-play-sate : 애니메이션을 멈추거나 다시 시작할 수 있습니다.
• animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.
• animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.

 

animation-name

@keyframes 속성에서 설정한 애니메이션의 이름입니다. 이름을 정의해야 애니메이셔을 재생할 수 있습니다.

animation-duration

한번 재생하는 데 걸리는 시간을 설정이며, 정수로 기입해야 합니다.

animation-delay

애니메이셔 시작을 지연하는 시간 설정 속성입니다.

 

• 0 : 속성을 적용하자마자 시작(기본값)
• now : 속성을 적용하자마자 시작 (0과 동일)
• 숫자와 단위 : 설정한 시간이 지난 뒤에 애니메이션 시작 (단위 : ms,s)

 

animation-direction

애니메이션 재생 방향을 정의하는 속성
@keyframes 속성의 from에 설정한 스타일에서 to -> from 순방향, from -> to 역방향

 

• normal : 애니메이션을 순뱡향으로 재생 (기본값)
• alternate : 순방향으로 애니메이션을 시작해 역방향과 순방향으로 번갈아 재생
• reverse : 애니메이션을 역방향으로 재생
• alternate-reverse : 역바향으로 시작해 순방향과 역방향으로 번갈아가면서 재생

 

animation-iteration-count

애니메이션 재생하는 획수를 정의하는 속성

 

• 숫자 : 기본값1, 설정한 획수만큼 재생
• infinite : 무한 재생

 

animation-play-state

애니메이션 재생 여부를 정의하는 속성

 

• running : 재생 (기본값)
• paused : 정지

 

animation-timing-function

애니메이션의 키프레임 사이의 재생 속도를 조절하는 속성

 

• liner : 일정속도
• ease-in-out : 천천히 갔다가 빠르게 돌아옴
• steps (숫자, 조건) : 조건에 맞게 끊어서 감
• cubic-bezier(숫자,숫자..) : 조건에 맞게 흘러감

 

animation-fill-mode

애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정하는 속성

 

• none : 애니메이션은 실행되지 않을 때 대상에 스타일 적용하지 않음 (기본값)
• forwards : 마지막 keyframe에 의해 설정된 계산 된 값을 유지합니다. 마지막 키 프레임은 animation-direction및 animation-iteration-count의 값에 따라 다릅니다.
• backwards : 애니메이션은 대상에 적용되는 즉시 첫 번째 관련 keyframe 에 정의 된 값을 적용하고 animation-delay 기간 동안 이값을 유지합니다. 첫 번째 관련 키프레임은 animation-direction의 값에 따라 다릅니다.
• both : 모두의 규칙을 따라 양방향으로 확장

 

@keyframes

애니메이션을 재생할 각 프레임의 스타일 정의
0%와 100% 사이에는 여러 개의 중간 값(%)을 설정해 프레임을 작성할 수 있습니다.

• 0% : 애니메이션의 시작 프레임
• 100% : 애니메이션의 마지막 프레임
• from : 애니메이션의 시작 프레임 (0% 동일)
• to : 애니메이션의 마지막 프레임 (100% 동일)