(CSS) transition이랑 animation 차이가 뭔가요? 언제 뭘 골라 써야 하는지

버튼에 마우스 올리면 색 부드럽게 바뀌는 거 만들려고 하다가 궁금해졌어요. transition으로도 되고 animation(keyframes)으로도 되는 것 같은데 둘 차이가 뭔지 잘 모르겠습니다.

지금 hover 효과는 그냥 transition으로 하고 있어요.

.btn {
  background: #3498db;
  transition: background 0.3s;
}
.btn:hover {
  background: #2980b9;
}

이건 잘 되는데, 예를 들어 로딩 스피너처럼 계속 빙글빙글 도는 거나, hover 없이 페이지 뜨자마자 저절로 움직이는 건 transition으로는 안 되더라고요. 그래서 그런 건 keyframes 써서 이렇게 했어요.

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 1s linear infinite;
}

여기까진 대충 되긴 하는데, 제가 개념을 몰라서 그냥 되는 걸로 갖다 쓰는 느낌이에요. 정확히 어떤 상황엔 transition 쓰고 어떤 상황엔 animation 쓰는 게 맞는 건가요? transition은 상태 변화가 있어야만 동작하는 거고 animation은 알아서 도는 거다 이렇게 이해하면 되나요? 그리고 두 개 성능 차이 같은 것도 있는지 궁금합니다.