JavaFX 如何通过CSS实现按钮悬停缩放的过渡动画？

嗨，我来帮你搞定这个问题～你遇到的问题其实是JavaFX的CSS过渡属性和网页标准CSS不一样，直接用-fx-transition-duration是行不通的，得用JavaFX专属的过渡写法才行。

首先，JavaFX里要实现过渡动画，得用-fx-transition属性，这个属性需要指定要过渡的具体CSS属性和动画时长（还可以可选加上缓动函数让动画更自然）。而且要把这个过渡属性写在按钮的基础样式里，而不是hover状态下，这样鼠标移入和移出按钮时，缩放效果都会有平滑的过渡。

给你修改后的完整代码：

.button {
    /* 指定缩放属性的过渡动画，时长0.3秒 */
    -fx-transition: -fx-scale-x 0.3s, -fx-scale-y 0.3s, -fx-scale-z 0.3s;
}

.button:hover {
    -fx-scale-x: 1.5;
    -fx-scale-y: 1.5;
    -fx-scale-z: 1.5;
}

如果想让动画的节奏更自然，比如先慢后快再慢，还可以加上缓动函数ease-in-out：

.button {
    -fx-transition: -fx-scale-x 0.3s ease-in-out, 
                    -fx-scale-y 0.3s ease-in-out, 
                    -fx-scale-z 0.3s ease-in-out;
}

简单解释下为什么之前的写法不行：JavaFX的CSS没有单独的-fx-transition-duration属性，所有过渡相关的配置都要通过-fx-transition来声明，必须明确指定要过渡的属性（比如这里的三个缩放属性），动画才能生效。

备注：内容来源于stack exchange，提问作者Arthur Minas