I have a strange error, I can not understand:
I want to combine two CSS animation properties (opacity and transform: translate), and my goal is an inline SVG element.
The combination is perfect in Chrome, overloaded by Firefox and does not work in Safari.
Safari seems to be able to do one or the other, and not simultaneously. I do not know what is happening in IE at the moment when I am on a Mac.
See an example: http://jsfiddle.net/712xwmss/
If someone can help him work normally in all 4 browsers, that would be very helpful.
SVG:
<svg width="28" height="65" viewBox="0 0 28 65" xmlns="http://www.w3.org/2000/svg" class="center-block svgscroll"> <title>Example</title> <g fill="none" fill-rule="evenodd"> <path d="M5 44.7l7 6.953 7-6.953" class="svgarrow sa1" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M3 50.66l9 8.94 9-8.94" class="svgarrow sa2" stroke="blue" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </g>
CSS:
.svgarrow { -moz-animation: drop 1s infinite; -webkit-animation: drop 1s infinite; animation: drop 1s infinite; } .svgarrow.sa1 { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .svgarrow.sa2 { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } @-moz-keyframes drop { 0% { -moz-transform: translateY(0px); transform: translateY(0px); opacity: 0; } 100% { -moz-transform: translateY(4px); transform: translateY(4px); opacity: 1; } } @-webkit-keyframes drop { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 0; } 100% { -webkit-transform: translateY(4px); transform: translateY(4px); opacity: 1; } } @keyframes drop { 0% { -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 0; } 100% { -moz-transform: translateY(4px); -ms-transform: translateY(4px); -webkit-transform: translateY(4px); transform: translateY(4px); opacity: 1; } }
Nelga source share