css @keyframes animation not working in Safari for Windows -
i made carousel script can either fade, slide or both transition. can set changing class name of parent container (#modulecarousel_12).
[fiddle: http://jsfiddle.net/6jx8ufwg/11/ ]
in chrome works fine.
in safari (for win) however:
- the fade works if parent has "slide left" in class name. strange, since adds second animation (left-positioning).
.modulecarousel.fade > div.active { z-index: 3; opacity: 1; -webkit-animation-name: fade; animation-name: fade; } .modulecarousel.slide.left.fade > div.active { -webkit-animation-name: slide-left, fade; animation-name: slide-left, fade; } /* chrome, safari, opera */ @-webkit-keyframes fade { 0% {opacity: 0; -moz-opacity: 0;} 100% {opacity: 1; -moz-opacity: 1;} } /* standard syntax */ @keyframes fade { 0% {opacity: 0; -moz-opacity: 0;} 100% {opacity: 1; -moz-opacity: 1;} } @-webkit-keyframes slide-left { 0% {left: 100%;} 100% {left: 0%;} } @keyframes slide-left { 0% {left: 100%;} 100% {left: 0%;} }
what doing wrong? :)
safari on windows isn't "real" browser, it's emulated kind of, work on it. there lot of bugs concerning it, , lot of web designers have issues it, , apple withdrew support safari on windows in 2012. part there's higher chance of winning lottery finding windows-safari-user.
Comments
Post a Comment