CODEWITHSUNDEEP
cross-browsersasscss-transitionsprefix
user1910388
user1910388

Reputation: 235

CSS transition only working in Safari

I have my css prefixed but my transitions only work in safari. I'm testing in the latest versions of Opera, Chrome and Firefox. The image does move on hover, the different colour icon appears, but no transition effect like I have in Safari.

Here is my 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;

                    }

                }

I really have no ideas why its not working. Any help would be great.

Thanks in advance, Alex

Upvotes: 0

Views: 534

Answers (1)

Krasimir
Krasimir

Reputation: 13539

The valid values for transition-property are:

transition-property: none|all|property;

Try using all instead of transition.

Upvotes: 1

Related Questions