CSS Animation

CSS amimation

• 값의 변화를 미리 작성해 요소에 애니메이션 적용이 가능하다.
• transition은 이벤트가 필요하지만 animation은 시작과 정지, 반복을 제어할 수 있다.

---

@keyfrmes

• 특정 지점에 값들을 설정하여 값이 변화하는 애니메션을 생성한다.

 @keyframes slideUp {
 	/* from : 값의 시작점, to : 값의 끝점 => 시작점에서 끝점으로 값이 변화 */
	from {
    	transform : translateY(0);
    }
    to {
    	transform : translateY(-20px);
    }
}

/* %로 특정지점에 값을 지정. */
    @keyframes changeColor {
 	0% {
    	background-color: red;
    }
    50% {
    	background-color : black;
    }
    100% {
    	background-color : blue;
    }

---

animation 개별 속성

1. anmation-name

• 적용하고자 하는 애니메이션을 지정한다.
• 작성한 @keyframes의 이름을 지정한다.
• ,를 통해 여러개의 애니메이션 지정이 가능하다.

.box {
	/* @keyframes slideUp 애니메이션 적용 */
	animation-name : slideUp;
    
    /* 여러개의 애니메이션 적용 */
    animation-name : slideup, disappear;
}

---

2. animation-delay

• 애니메이션의 지연시간을 지정해 애니메이션 시작을 늦춘다.

.box {
	/* 애니메이션을 1초 지연*/
	animation-name : slideUp;
    animation-dealy : 1s;
}

---

3. animation-duration

• 애니메이션의 실행시간을 지정한다.
• s(초), ms(1/1000초) 단위를 사용한다.

.box {
	/* 애니메이션을 1초에 걸쳐 실행*/
	animation-name : slideUp;
    animation-duration : 1s;
}

---

4. animation-timing-function

• 애니메이션의 값 변화의 속도를 지정한다.

.box {
	animation-name : slideUp;
    
    /* 애니메이션이 천천히 시작하여 빠르게 끝*/
    animation-timing-function : ease-in;
    
    /* animation이 빠르게 시작하여 천천히 끝 */
    animation-timing-function : ease-out;
    
    /* 애니메이션이 천천히 시작하여 빨라졌다가 천천히 끝 */
    animation-timing-function : ease-in-out;
}

---

5. animation-iteration-count

• 애니메이션의 반복 횟수를 지정한다.
• 숫자 혹은 ifinite(무한).

.box {
	animation-name : slideUp;
    
    /* 애니메이션을 2회 반복*/
    animation-iteration-count : 2;
    
    /* 애니메이션을 무한 반복 */
	animation-iteration-count : infinite;
}

6. animation-direction

• 애니메이션의 재생 방향을 지정한다.

값	설명
normal	매 사이클마다 정방향으로 재생된다.
reverse	매 사이클마다 역방향으로 재생된다.
alternate	매 사이클마다 방향을 뒤집는다. 정방향으로 시작한다.
alternate-reverse	매 사이클마다 방향을 뒤집는다. 역방향으로 시작한다.

.box {
	animation-name : slideUp;
    
    /* 애니메이션을 2회 반복*/
    animation-iteration-count : infinite;
    
    /* 애니메이션을 정방향으로 재생 */
    animation-direction : normal;
    
    /* 애니메이션을 역방향으로 재생 */
    animation-direction : reverse;
    
    /* 애니메이션을 사이클마다 방향을 반전, 정방향으로 시작 */
    animation-direction : alternate;
    
    /* 애니메이션을 사이클마다 방향을 반전, 역방향으로 시작 */
    animation-direction : alternate-reverse;
}

7. animation-fill-mode

• 애니메이션 종료 후 스타일 유지 여부를 지정한다.

값	설명
none	애니메이션 종료 후 스타일을 유지하지 않는다.
forword	애니메이션 종료 후 마지막 프레임의 스타일을 유지한다.
backword	애니메이션 시작 전에 시작 프레임의 스타일을 유지한다.
both	애니메이션 시작 프레임과 종료 프레임의 스타일을 모두 유지한다.