[[Chakra UI]]でホバーしたとき、終了したときにアニメーションさせるには、`_hover`を使えばよい。
```html
<Box
backgroundColor="gray"
_hover={{
backgroundColor: 'red',
transitionDuration: '0.5s',
}}
>
<div>ホバーすると0.5秒かけて背景が赤色に</div>
</Box>
```
<button class="playground"><a href="https://play.chakra-ui.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwATFwCEIAPXAX1wDNMIVcByAATAAsBDAa03YFoBXJAHpMMdmGwMAOgDtZMEhhy5IMgM54AgmjS4AvLgAUASn0A+fLNy5R2fphlGr13AB5iJZy9wAjcZwBzWn4ZKABhCAAbLD0pECD2AE84rxcAfVYIADcYTD1gYFTvPzBA4NCI6Mx4RlEoBgAaIpdsHnUkbCQIGQARe3ZO7pqGAAYAOgBWNUbm8nJUs2bXKCQss0BthkAFhkAfhkBNBkBohkALBnGJwCXPQGkGQEUGQDMGQBmAwHszQBkGQBNYwCcgwGsGVyEVtdSvj0Wjlwxlk8xkIHIQA">Playground</a></button>
ホバー解除時にもアニメーションするには、`_hover`の外側にも`transitionDuration`を設定してあげる。
```html
<Box
backgroundColor="gray"
_hover={{
backgroundColor: 'red',
transitionDuration: '0.5s',
}}
transitionDuration="1.0s"
>
<div>ホバーすると0.5秒かけて背景が赤色になり、やめると1.0秒かけて元に戻る</div>
</Box>
```
<button class="playground"><a href="https://play.chakra-ui.com/playground?code=N4Igxg9gJgpiBcICWBbADhATgFwATFwCEIAPXAX1wDNMIVcByAATAAsBDAa03YFoBXJAHpMMdmGwMAOgDtZMEhhy5IMgM54AgmjS4AvLgAUASn0A+fLNy5R2fphlGr13AB5iJZy9wAjcZwBzWn4ZKABhCAAbLD0pECD2AE84rxcAfVYIADcYTD1gYFTvPzBA4NCI6Mx4RlEoBgAaIpdsHnUkbCQIGQARe3ZO7pqGAAYAOgBWNUbm8nJm1vZ2wd7+ldiQAEYxkbUUxxczZtcoJCyzQG2GQAWGQB+GQE0GQGiGQAsGcYnAJc9AaQZARQZAMwZAGYDAPZmgBkGQAmsYAnIMA1gyAKwZAFEMgEAGQAhDIBAhme2xGn1+gGFFCGAbiMHq4hKdzqkCR4jgdjLJ5jIQOQgA">Playground</a></button>
## 参考
- https://github.com/chakra-ui/chakra-ui/issues/363