CSS - 애니메이션 (transition, animation)

---

 

CSS 애니메이션 

 

 

🤔 transition vs animation

- transition : 요소의 상태가 변경되어야 애니메이션을 실행할 수 있다. 

- animation : 요소의 상태 변화와 관계없이 애니메이션을 실행할 수 있다.

 

 

 

 * transition 

- CSS 속성값이 변할 때, 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것을 말한다. 
- 단축 속성이다. 
- transition-property | transition-duration | transition-timing-function | transition-delay

.transition {
transition: width 2s linear 1s; 
}

/* width 속성을 | 2초 동안 | 처음부터 끝까지 일정한 속도로 | 1초 지연시킨 뒤에 효과가 일어남 */

 

 

 * transition-property 

- property : 속성 
- 전환 효과를 적용할 CSS 속성을 설정한다. 

• all: 기본값 / 모든 속성에 transition 효과가 나타나게 한다.
• none: 속성들이 transition 효과를 받지 못하게 한다. 

- 하나 이상의 속성에 적용하고 싶을 때는 쉼표로 나열한다.

• initial: 속성의 기본값으로 설정해 준다.
• inherit: 부모요소의 속성값을 상속받는다. 

 

 

 * transition-duration 

- duration: 지속
- transition이 완료되는 데 걸리는 시간을 설정한다.

 

 

 * transition-timing-function 

- 진행 속도를 설정할 수 있다. 

• ease : 천천히 시작하여 빨라지다가 마지막에 다시 느려진다. 마지막 속도보다 시작 속도가 약간 더 빠르다.
• linear : 애니메이션의 변화 속도가 처음부터 끝까지 동일하다. (선형)
• ease-in : 천천히 시작하여 마지막에 속도를 높여 끝난다.
• ease-out : 빠른 속도에서 시작하여 마지막에 천천히 속도를 줄여 끝난다. 
• ease-in-out : 천천히 시작되어 정상 속도가 되었다가 마지막에 느려진다.
• step-start
• step-end
• steps(int, start|end)
• cubic-bezier(n, n, n, n)
• initial
• inherit

※ 대부분의 timing 함수들은 cubic bezier를 사용한다. cubic bezier이란 부드러운 곡선을 모델링하기 위해 컴퓨터 그래픽에서 널리 쓰이는 것으로 4개의 컨트롤 포인트를 사용해 transition의 시작과 끝까지 효과를 제어하는 것이다. 

 

 

 * transition-delay 

- delay : 지연 
- 지연시간을 설정한다. 
- 전환을 얼마만큼 기다렸다가 실행할지 결정해 준다. 
- 음수 값을 지정할 수 있다. 
※ 음수 값을 지정할 경우 지연 없이 바로 transition이 실행되며 지정해 준 음수값의 절댓값 시간만큼 기다렸다가 시작하게 된다. 

transition: all linear 3s -2s 

/* 효과의 2초 시점부터 바로 적용된다. */

 

 

---

 

 * animation 

- 여러 스타일을 전환시킬 수 있다. 

- JavaScript 없이 요소에 애니메이션 효과를 적용한다. 

- 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다. 

 

 

 * @keyframes 

- 두 개 이상의 애니메이션 중간 상태를 설정한다. 

- 0% 시작점, 100% 종료 시점을 의미한다. (from, to로도 사용할 수 있다.)

/* [ from ~ to 속성 ] */
@keyframes animation-name {
	from {}
	to {}
}

/* [ 0% ~ 100% 속성 ] */
@keyframes animation-name {
	0% {}
	50% {}
	100% {}
}

 

 

 * animation-name 

@keyframes animation-name {}

- animation-name의 시작에는 영문 소문자, 문자열, 언더바(_), 하이픈(-)을 사용한다. 

※ 영문 대문자, 숫자, 특수문자는 사용할 수 없다. (파일 및 폴더명에는 허용된다.)

- 여러 개의 animation-name을 동시에 나열할 경우 쉼표로 구분한다.

 

 

 * animation-duration 

- 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정한다. 

- 음수값으로 설정하면 애니메이션이 실행되지 않는다. 

animation-duration: 0.1s;
animation-duration: 100ms;

 

 

 * animation-timing-function 

- 애니메이션이 진행되는 방식을 설정한다. (속도)

• ease : 기본값 / 중간으로 갈수록 속도가 증가하고 끝에서 다시 느려진다. 
• linear : 균일한 속도로 움직인다. 
• steps(n) : n개의 단계로 움직인다. 

 

 

 * animation-delay 

- 언제 애니메이션이 시작될지 설정한다. 

- 음수값을 지정하게 되면 애니메이션 도중에 시작된다. 

• 지정한 시간이 지난 뒤의 장면부터 지연 없이 시작된다. 

animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

animation-delay: -2s;
/* -2s일 경우 시퀀스 2초부터 시작 */

 

 

 * animation-interation-count 

- 애니메이션 재생 횟수를 설정한다. 

• infinite : 무한 반복한다. 
• 0.5 : 절반만 재생한다. 

 

 

 * animation-direction 

- 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야 하는지 여부를 설정한다. 

• normal : 기본값 / 정방향으로 재생한다. 
• reverse : 역방향으로 재생한다. 
• alternate : 정방향, 역방향으로 반복한다. 
• alternate-reverse : 역방향, 정방향으로 반복한다.

 

 

 * animation-fill-mode 

- 실행 전과 후에, 대상에 스타일을 적용하는 방법을 지정한다. 

- 애니메이션이 끝난 후 처음으로 돌아가거나 계속 유지되게 할 수 있다.

• normal : 기본값 / 스타일을 적용하지 않는다. 
• forwards : 요소의 기존 스타일로 시작하여 애니메이션의 마지막 속성값을 유지한다. 
• backwards : 실행되기 전에 애니메이션의 스타일을 미리 적용하고 마지막에는 요소의 기존 스타일로 돌아간다. 
• both : 실행되기 전에 애니메이션의 스타일을 미리 적용하고 마지막 값을 유지한다. 

 

 

 * animation-play-state 

- 애니메이션 재생 여부를 설정한다. 

• paused : 정지 
• running : 재생 

 

 

 * animation 

- 단축 속성이다. 

animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-fill-mode | animation-play-state

animation: animation-name 3s ease-in 1s infinite reverse both running ;

✏ 다양한 CSS 애니메이션 참고 블로그

https://medium.com/frontend-canteen/fantastic-css-border-animation-b02e06828beb

 

 

---

 

 

 

 

 

 

 

 

 

 

 

잘못된 정보에 대한 피드백은 언제든지 환영입니다!