按钮动画修复与HTML和CSS

我有一个用HTML和CSS制作的基本按钮，当鼠标悬停在上面时会显示文本。我想纠正动画效果，这不是很正确

移除光标后，动画会急剧减小按钮的大小。那么也许它可以通过过渡效应来完成

我希望我已经够清楚了

.home按钮{
线高：100%；
填充：5px40px 5px 5px；
字体系列：Arial；
字体大小：12px；
位置：相对位置；
}
.主页按钮跨度{
位置：绝对位置；
顶部：20px；
不透明度：0；
字号：600；
颜色：#454b54；
}
.主页按钮：悬停{
动画名称：放大；
动画持续时间：1s；
动画填充模式：正向；
}
.主页按钮：悬停范围{
动画名称：出现；
动画持续时间：1.5s；
动画填充模式：正向；
}
.home按钮：：之前{
右边距：5px；
背景图片：url(https://mcusercontent.com/ec104f3d77537e1962ab6441c/images/d7bb4928-a156-4682-9677-d0d5b47c3a21.png);
背景尺寸：40px 40px；
显示：内联块；
宽度：40px；
高度：40px；
边界半径：100%；
内容：“；
}
.主补码按钮{
背景色：#fff；
边界半径：100px；
盒影：0 4px 8px#dadce0；
过渡：0.3s；
}
.主补充按钮：焦点{
背景色：#e8f0fb！重要；
}
@出现关键帧{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
@关键帧放大{
从{
右边填充：40px；
}
到{
右边填充：50px；
}
}

---

你不需要使用动画。只需使用转换。这是比较顺利的

.home按钮{
线高：100%；
填充：5px40px 5px 5px；
字体系列：Arial；
字体大小：12px；
位置：相对位置；
过渡：1s；
}
.主页按钮跨度{
位置：绝对位置；
顶部：20px；
不透明度：0；
字号：600；
颜色：#454b54；
}
.主页按钮：悬停{
右边填充：50px；
}
.主页按钮：悬停范围{
过渡：不透明度1.5s；/*我在这里添加了过渡，因为我希望它返回时需要0秒*/
不透明度：1；
}
.home按钮：：之前{
右边距：5px；
背景图片：url(https://mcusercontent.com/ec104f3d77537e1962ab6441c/images/d7bb4928-a156-4682-9677-d0d5b47c3a21.png);
背景尺寸：40px 40px；
显示：内联块；
宽度：40px；
高度：40px；
边界半径：100%；
内容：“；
}
.主补码按钮{
背景色：#fff；
边界半径：100px；
盒影：0 4px 8px#dadce0；
过渡：0.3s；
}
.主补充按钮：焦点{
背景色：#e8f0fb！重要；
}

---

我自己可以提供以下解决方案：

.home按钮{
线高：100%；
填充物：5px 5px 5px；
字体系列：Arial；
字体大小：12px；
位置：相对位置；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
宽度：40px；
过渡：0.3s；
}
.主页按钮跨度{
顶部：20px；
不透明度：0；
字号：600；
颜色：#454b54；
保证金：自动；
}
.主页按钮：悬停{
宽度：100px；
}
.主页按钮：悬停范围{
不透明度：1；
动画名称：文本_左；
动画持续时间：1s；
}
.home按钮：：之前{
背景图片：url(https://mcusercontent.com/ec104f3d77537e1962ab6441c/images/d7bb4928-a156-4682-9677-d0d5b47c3a21.png);
背景尺寸：40px 40px；
显示：内联块；
最小宽度：40px；
最小高度：40px；
边界半径：100%；
内容：“；
}
.主补码按钮{
背景色：#fff；
边界半径：100px；
盒影：0 4px 8px#dadce0；
}
.主补充按钮：焦点{
背景色：#e8f0fb！重要；
}
@文本左关键帧{
从{
不透明度：0；
}
到{
不透明度：1；
}
}

---

过渡是动画的一种形式，不是吗？它被认为是一种形式，但当它返回时与动画有区别。动画被突然剪切，过渡没有中断。这很清楚。在指出这个细节之前，我对你的答案投了赞成票。