[css] transition, keyframe

CSS의 transition 속성은 해당 요소의 상태 변화가 발생했을 때 애니메이션 효과를 적용하는 데 사용된다. 일반적으로 상태 변화는 사용자의 상호작용에 의해 발생하며, 예를 들어 마우스를 올리거나 클릭하는 등으로 발생한다.
ex) :hover, :focus, :active와 같은 가상 클래스 선택자를 사용하여 요소의 상태를 나타냅니다.

visibility:visible 등의 속성은 transition 이 적용이 안되는 속성이다.
opacity, width, height등등으로 대체하여야 한다.

transition의 구성요소

transition: property name | duration | timing function | delay

아래의 코드는 hover시 요소의 배경색을 부드럽게 변화하도록 설정되어있다.

cssCopy code
.element {
  background-color: red;
  transition: background-color 0.3s ease;
}

.element:hover {
  background-color: blue;
}