CSS Animation

- 다수의 스타일을 전환하는 애니메이션을 적용합니다.

- 유저의 액션에 따라 A에서 B로만 행동하는 transition과는 다르게,

   keyframe을 사용하여 다양한 액션의 세트를 만들 수 있는 속성입니다.

 

 

keyframes

@keyframes slidein{
	/* 처음상태 */
	from{
   		margin-left: 100%;
   		width: 300%;
   	}
	/* 이후 상태 */
	to{
		margin-left: 0%;
		width: 100%;
	}
}

@keyframes identifier{
	0% { top: 0; left: 0; }
	30% { top: 50px; }
	68%, 72% { left: 50px; }
	100% { top: 100px; left: 100%; }
}

 

   - 애니메이션에서 작동하는 중간절차를 의미합니다.

   - keyframes 를 통해 CSS 애니메이션의 중간 절차를 제어할 수 있습니다.

   - 브라우저에서 자동으로 애니메이션을 처리할 수 있지만,

      keyframes를 사용하면 더 세밀하게 중간동작들을 제어할 수 있습니다.

   - from~to 를 사용하여 시작점과 끝점을 지정하거나, %를 통하여 좀 더 세밀하게 지정할 수 있습니다.

 

 

 

animation-name

   - keyframes의 이름을 입력하여 어떤 keyframe을 사용하는지 지정해주는 속성입니다.

   - 대소문자를 구분하며, 알파벳 대문자(A-Z), 알파벳 소문자(a-z), 언더바( _ ), 대시( - )만 사용할 수 있습니다.

 

animation-duration

   - 애니메이션의 한 사이클에 걸리는 시간을 지정해 줍니다.

 

 

animation-delay

   - 애니메이션 시작 전에 지연시간을 설정하는데 사용합니다.

   - 양수값을 입력하면 해당 시간 후 작동하며,

      음수값을 입력하면 처음엔 바로 시작하고, 애니메이션 작동중에 이후 애니메이션이 작동됩니다.

 

 

animation-timing-function

   - transition-timing-function 과 동일하게 애니메이션 실행 속도를 조절할때 사용합니다.

 

 

animation-iteration-count

   - 애니메이션의 반복 재생 횟수를 지정해줍니다.

   - number값을 입력할 수 있으며, 기본값은 1로, 1회만 재생합니다.

   - 소수점을 입력하면 해당 %까지만 움직입니다.

   - infinite를 입력하여 무한으로 재생할 수 있습니다.

 

animation-direction

   - 애니메이션의 작동 방식을 설정합니다.

   - 4가지 옵션이 존재합니다.

      1. normal (정방향 재생)

      2. reverse (역방향 재생)

      3. alternate (정방향 역방향 반복)

      4. alternate-reverse (역방향 정방향 반복)

 

 

 

animation-paly-state

   - 애니메이션의 작동을 일시 정지 시킬 수 있습니다.

   - running (재생) 과 paused (일시정지) 두가지 값을 넣을 수 있습니다.

   - 주로 hover 등의 효과와 함께사용합니다.

 

 

animation-fill-mode

 

   - 애니메이션 실행 전과 후에 스타일을 적용하는 방법을 지정합니다.

   - 예시

/* css */
.box{
    background-color: rgb(204, 253, 225);
    animation: animation 2s infinite alternate;
    text-align: center;
}

@keyframes animation {
    0% {
        background-color: red;
    }
    50% {
        width: 300px;
    }
    100% {
        background-color: black;
    }
}



<!-- HTML -->
<div class="box">hello world!</div>

   - 애니메이션의 적용 순서는

      1. 기존 스타일

      2. keyframes 실행

      3. 기존 스타일로 복귀

      의 순서로 진행됩니다.

 

      - forwards : 애니메이션 실행 후 기존스타일 복귀를 하지 않습니다.

         위의 순서에서는 3번 작업을 수행하지 않고 keyframes를 실행합니다.

 

      - backwords : 애니메이션 실행 전 기존스타일 적용을 하지 않습니다.

         위의 순서에서는 1번 작업을 수행하지 않으며, 애니메이션 수행 후 기존스타일로 복귀합니다.

 

      - both : forwards 와 backwards 둘 다 적용시킵니다.

 

 

 

 

animation ( shorthand )

   - 애니메이션 속성을 묶어놓은 단축속성입니다.

   - duration, delay, direction, fill-mode, iteration-count, name, play-state, timing-function 등을 포함합니다.

   - time값이 중복되기때문에, 첫번째 time 값은 animation-duration, 두번째 time값은 animation-delay 를 의미합니다.