CSS 속성 - animations

animation

요소에 애니메이션을 설정/제어

• 애니메이션이라는 속성자체가 애니메이션을 직접적으로 만들어주는 개념은 아니고
  @keyframes 규칙에 설정된 애니메이션의 정의를 anumation 속성을 통해서 설정하고 나머지 개별 속성들을 통해서 제어하는 개념이다.

값	의미	기본값
anumation-name	@keyframes 규칙의 이름을 지정	none
animation-duration	애니메이션의 지속시간 설정	0s
animation-timing-funtion	타이밍 함수 지정	ease
animation-delay	애니메이션의 대기 시간 설정	0s
animation-iteration-count	애니메이션의 반복 횟수 설정	1
animation-direction	애니메이션의 반복 방향 설정	normal
animation-fill-mode	애니메이션의 전후 상태(위치) 설정	none
animation-play-state	애니메이션의 재생과 정지 설정	running

---

animation 단축속성

animation: 애니메이션이름 지속시간 [타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지];
/*지속시간 뒤에 대기시간 입력,나머지는 순서 상관X 대기시간도 지속시간만 뒤에 있으면 순서상관X */

.box {
	width:100px;
	height: 100px;
  background: tomato;
  animation: hello 2s linear infinite both;
}
@keyframes hello {
	0% {width: 200px;}
	100% {width: 50px;}
}

---

@keyframes : 2개 이상의 애니메이션 중간 상태(프레임)을 지정

@keyframes 애니메이션이름 {
	0% { 속성: 값; }
	50% { 속성: 값; }
	100% { 속성: 값; }
}

@keyframes move-box{
	0% { left: 100px; }
	100% { top: 200px; }
}

---

animation-name : @keyframes 규칙(애니메이션 프레임)의 이름을 지정

값	의미	기본값
none	애니메이션을 지정하지 않음	none
@keyframes	이름이 일치하는 @keyframes 규칙의 애니메이션을 적용

---

animation-duration : 애니메이션의 지속 시간 설정

값	의미	기본값
시간	지속 시간을 설정	0s

---

animation-timing-function : 타이밍 함수(애니메이션 효과를 계산하는 방법) 지정

타이밍 함수란? 전환 효과가 빠르게→천천히 끝날것이냐 천천히→빠르게 끝날것이냐, 일정하게 애니메이션을 지속할 것이냐 정하는 것
Easing Funtion URL : https://easings.net/ko#

값	의미	기본 값	Cubic Bezier 값
ease	빠르게 - 느리게	ease	cubic-bezier(0.25, 0.1, 0.25, 0.1)
linear	일정하게		cubic-bezier(0, 0, 1, 1)
ease-in	느리게 - 빠르게		cubic-bezier(0.42, 0, 1, 1)
ease-out	빠르게 - 느리게		cubic-bezier(0, 0, .58, 1)
ease-in-out	느리게 - 빠르게 - 느리게		cubic-bezier(0.42, 0, 0.58, 1)
cubic-bezier(n, n, n, n)	자신만의 값을 정의(0~1)
steps(n)	n번 분할된 애니메이션

---

animation-delay : 애니메이션의 대기 시간 설정

• 음수 허용, 음수가 있을 경우 애니메이션은 바로 시작되지만, 그 값만큼 애니메이션이 앞서 시작
  (애니메이션 주기 도중에 시작)

값	의미	기본값
시간	대기 시간을 설정	0s

---

animation-iteration-count : 애니메이션의 반복 횟수를 설정

값	의미	기본값
숫자	반복 횟수를 설정	1
infinite	무한 반복

---

animation-direction : 애니메이션의 반복 방향을 설정

값	의미	기본값
nomal	정방향만 반복	normal
reverse	역방향만 반복
alternate	정방향에서 역방향으로 반복(왕복)
alternate-reverse	역방향에서 정방향으로 반복(왕복)

---

animation-fill-mode : 애니메이션의 전후 상태(위치)를 설정

값	의미	기본값
none	기존 위치에서 시작 → 애니메이션 시작 위치로 이동 → 동작 → 기존 위치에서 끝	none
forwards	기존 위치에서 시작 → 애니메이션 시작 위치로 이동 → 동작 → 애니메이션 끝 위치에서 끝
backwards	애니메이션 시작 위치에서 시작 → 동작 → 기존 위치에서 끝
both	애니메이션 시작 위치에서 시작 → 동작 → 애니메이션 끝 위치에서 끝

---

animation-play-state : 애니메이션의 재생과 정지를 설정(마우스 오버 시 멈추게할 때 유용)

값	의미	기본값
running	애니메이션을 동작	running
paused	애니메이션 동작을 정지

.box {
	width:150px;
	height: 100px;
  border-radius: 10px;
  margin: 30px;
  background: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: move 3s linear infinite alternate;
}

.box::before {
  content: 'runnig';
  color: #000;
  font-size: 24px;
  font-weight: 700; 
}

.box:hover {
  animation-play-state: paused;
  background: #000;
}

.box:hover::before {
  content: 'paused';
  color: #fff;
}

@keyframes move {
  0%{width: 150px;}
  100%{width: 100%;}
}

---

이 글은 패스트캠퍼스 '프론트엔드(React)올인원패키지Online'을 수강하며 정리한 노트입니다.
https://fastcampus.co.kr/search?keyword=%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C