hover 이벤트에 효과주기

프로젝트의 Home 화면에서 상단 바를 만드는 작업을 하는 도중, 상단 바 요소에 마우스 커서가 올라가면 색이 바뀌는 효과를 주고 싶어서 css를 적용시켜 보았다.

<div class="home__bar">
        <a class="home__bar-weight" href="#">Weight</a>
        <a class="home__bar-diet" href="#">Diet</a>
        <a class="home__bar-excercise" href="#">Excercise</a>
        <a class="home__bar-Tips" href="#">Tips</a>
</div>

.home__bar a {
  display: inline-block;
  width: 270px;
  height: 40px;
  background-color: powderblue;
  font-size: 20px;
  text-decoration: none;
  text-align: center;
}

.home__bar a:hover {
  background-color: skyblue;
  transition: background-color 0.5s;
}

마우스 커서가 바에 위치하지 않으면 다음과 같은 상태이다.

Weight 요소에 마우스 커서를 올렸더니 다음과 같이 색깔이 변하였다. 천천히 바뀌길 원해서 animation 효과도 부여하였다.