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

Popular posts from this blog

Delphi change the assembly code of a running process -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

C++ 11 "class" keyword -