css3 animation is not working in Safari -
css3 animation is not working in Safari -
css3 animation not working me in safari (works ok in other browsers), tried splitting out shorthand each property declared separately eg:
-webkit-animation-name: glow; -webkit-animation-duration: 2s;
......
but still doesn't work. ideas?
.light:after { content:''; display:block; z-index:1; border-radius: 50%; width: 15px; height: 15px; position:absolute; cursor:pointer; background:rgba(64, 61, 51, 1); -webkit-transition: 500ms ease-in-out 0s; -moz-transition: 500ms ease-in-out 0s; -o-transition: 500ms ease-in-out 0s; transition:all 500ms ease-in-out 0s; } .light.turned-on:after { content:''; display:block; z-index:1; background:rgba(255, 242, 204, 1); -webkit-transition: 500ms ease-in-out 0s; -moz-transition: 500ms ease-in-out 0s; -o-transition: 500ms ease-in-out 0s; transition:all 500ms ease-in-out 0s; } .game-area.won .light:after { -webkit-animation-name: glow; -webkit-animation-duration: 2s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: forwards; -moz-animation: glow 2s ease-in-out infinite alternate; -o-animation: glow 2s ease-in-out infinite alternate; animation: glow 2s ease-in-out infinite alternate; } @-webkit-keyframes glow { 0% { background: #fff2cc; } 10% { background: #fff2cc; } 30% { background: #c58fcc; } 50% { background: #ae86b2; } 70% { background: #b2a57d; } 90% { background: #b2ffeb; } 100% { background: #b2ffeb; } }
just realized in safari 8.0.7 (10600.7.5) cannot utilize animation
on display: inline
elements. since display
inline-block
or other, animation works.
i hope help someone.
css3
Comments
Post a Comment