CSS 过渡仅在 Safari 中工作

Question

我有我的css前缀，但我的过渡只能在Safari中工作。我正在最新版本的Opera，Chrome和Firefox中进行测试。图像确实在悬停时移动，出现不同颜色的图标，但没有像我在 Safari 中那样的过渡效果。

这是我的 scss：

li {
                height: em(36);
                width: em(28);
                display: inline-block;
                }
            li:first-child {
                background-image: url(social.svg);
                background-position: 84px 0px;
                /*transition-property*/
                -webkit-transition-property:transition;
                   -moz-transition-property:transition;
                     -o-transition-property:transition;
                        transition-property:transition;
                /*transition-duration*/
                -webkit-transition-duration:350ms;
                   -moz-transition-duration:350ms;
                     -o-transition-duration:350ms;
                        transition-duration:350ms;
                &:hover{
                background-position: 84px -36px;
                    }
                }
            li:nth-child(2) {
                background-image: url(social.svg);
                background-position: 56px 0px;
                /*transition-property*/
                -webkit-transition-property:transition;
                   -moz-transition-property:transition;
                     -o-transition-property:transition;
                        transition-property:transition;
                /*transition-duration*/
                -webkit-transition-duration:350ms;
                   -moz-transition-duration:350ms;
                     -o-transition-duration:350ms;
                        transition-duration:350ms; 
                &:hover{
                background-position: 56px -36px;
                    }
                }
            li:nth-child(3) {
                background-image: url(social.svg);
                background-position: 28px 0px;
                /*transition-property*/
                -webkit-transition-property:transition;
                   -moz-transition-property:transition;
                     -o-transition-property:transition;
                        transition-property:transition;
                /*transition-duration*/
                -webkit-transition-duration:350ms;
                   -moz-transition-duration:350ms;
                     -o-transition-duration:350ms;
                        transition-duration:350ms;
                &:hover{
                background-position: 28px -36px;
                    }
                }

我真的不知道为什么它不起作用。任何帮助都会很棒。

提前感谢，亚历克斯

Answer 1

transition-property 的有效值为：

transition-property: none|all|property;

尝试使用 all 而不是过渡。