#17. CSS - Keyframes

Keyframes

2개 이사의 애니메이션 중간 상태를 지정합니다.

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

<!-- HTML -->
<div class="container">
  <div class="item item1">1</div>
</div>

/* CSS */
.container .item {
  width: 100px;
  height:100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item:hover {
  animation: my-animation 3s infinite alternate;
}

@keyframes my-animation{
  0% {
    width: 100px;
    background: tomato;
  }
  75% {
    width: 500px;
    background: blue;
  }
  100% {
    width: 300px;
    background: yellowgreen;
  }
}

마우스를 올리지 않은 0% 상태일 때는 너비 100px, 배경 tomato를 유지합니다. 75% 일 때는 너비 500px, 색상 blue로 변경하고, 100%일 때는 300px, yellowgreen 색상을 적용시킵니다.

이 과정은 infinite 옵션으로 무제한 반복되고, alternate 옵션으로 끊김이 없이 자연스럽게 다음 동작으로 연결됩니다.