transition 속성

hover과 같이 사용될 수 있으며 변화를 부드럽게 만들어주는것이 가능합니다.

예를 들어

.box:hover{
	background-color: blue;
        border-radius: 50%;
}

위와 같이 작성했을때 마우스를 box위에 올리게되면 한순간에 속성들이 바뀌게 됩니다.
이 과정을 애니메이션처럼 부드럽게 만들어줄 수 있는 속성이 바로 transition입니다.

사용방법은 간단합니다. 위의 코드 밑에

transition: all 2s ease;

해당 코드를 작성하게되면 적용이 됩니다.
all을 통해 모든 속성에 적용하고 속도와 애니메이션을 지정해줄 수 있습니다.

위에서 작성한 내용 외에도 많은 속성들이 있습니다.
MDN