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 而不是 transition。