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;

尝试使用所有而不是过渡。

CSS转换仅适用于Safari

1 个答案: