在悬停时流畅地更改动画速度吗？

Question

我在悬停时正确更改我的缩放动画的速度时遇到问题-每次悬停时，动画都会跳到第一个关键帧，与平滑相反。

可以这么说，动画迅速放大和缩小字母“呼吸”。悬停时，它应该变慢。​​

我试图暂停并在悬停时运行较慢的动画，但这只是前后移动字母而已...

这是我的守则摘录！ （请注意，这是较大项目的一部分，并具有相应的样式。）

CSS：

.r {
font-size: 590.4px;
color: #252122;
margin-left: -39.36px;
margin-top: -189.58px;
display: inline-block;
font-family: 'Helvetica', 'Arial', sans-serif;
font-weight: bold;
transform: translate3d(-50%, -50%, 0%);
text-align: center;
animation-name: breathe;
animation-iteration-count: infinite;
animation-duration: 0.8s;
}

.r:hover{
animation-duration: 4s;
transition-property: animation-duration;
transition-timing-function: ease-in-out; 
} 

@keyframes breathe{
0% {transform: scale(1)}
50% {transform: scale(1.2)}
100% {transform: scale(1)}    
}

HTML：

<div class="wrapper-r">
     <div class="r">r</div>
</div>