SVG animation not working on Safari and pretty slow

so today I’ve tried to create an animation using an SVG and css. (Old logo changes to a new logo, when hovering over the letters the old logo shows) It works quite OK, but it’s sometimes a bit slow and it doesn’t work on safari browsers. Any tips or help would be greatly appreciated

The letters have an ID = G, the two illustrations have the ID = B.
Html:

<xml version=”1.0″ encoding=”utf-8″>
<!– Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) –>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<a href=”/”>
<svg version=”1.1″ id=”Layer_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”
width=”145px” height=”50px” viewBox=”0 0 340 120″ enable-background=”new 0 0 340 120″ xml:space=”preserve”>

<g>
<path id=”g” fill=”#303030″ d=”M35.28,46.624v37.524c0,6.479-2.475,12.65-6.787,16.933c-3.672,3.642-8.394,5.644-13.31,5.644
c-0.044,0-0.091,0-0.135,0c-5.044-0.039-11.456-1.945-12.171-2.16l2.878-9.486c1.568,0.476,6.307,1.712,9.368,1.732
c0.021,0,0.043,0,0.064,0c2.917,0,5.047-1.5,6.323-2.769c1.627-1.615,2.783-3.756,3.382-6.135c-2.14,1.043-4.477,1.612-6.913,1.612
c-9.875,0-17.909-9.473-17.909-21.113c0-11.641,8.032-21.113,17.909-21.113c2.622,0,5.123,0.664,7.387,1.858v-2.528L35.28,46.624
L35.28,46.624z M25.366,64.238c-1.229-4.156-4.204-7.032-7.387-7.032c-4.333,0-7.997,5.128-7.997,11.2
c0,6.07,3.662,11.201,7.997,11.201c3.169,0,6.158-2.877,7.387-7.022V64.238z”/>
<path id =”g” fill=”#303030″ d=”M74.039,72.375l-24.732,0.959c0.512,1.124,1.206,2.148,2.049,3.04c4.015,4.214,11.531,4.379,16.752,0.346
l6.047,7.865c-4.329,3.338-9.516,4.99-14.588,4.99c-5.767,0-11.383-2.148-15.398-6.378c-4.246-4.461-6.36-10.688-5.783-17.067
c0.562-6.161,3.586-11.812,8.112-15.116c6.047-4.444,16.406-5.204,22.568,1.272c5.353,5.618,5.353,13.349,5.22,15.596
L74.039,72.375z M63.895,62.842c-0.364-1.287-0.975-2.642-2-3.716c-1.106-1.173-2.742-1.619-4.411-1.619
c-1.949,0-3.948,0.628-5.138,1.503c-1.404,1.025-2.528,2.578-3.238,4.412L63.895,62.842z”/>
<path id =”g” fill=”#303030″ d=”M77.637,89.034v-56.22h9.913v56.22H77.637z”/>
<path id =”g” fill=”#303030″ d=”M125.855,32.814v56.22h-9.913V87.65c-2.267,1.199-4.768,1.869-7.386,1.869
c-9.876,0-17.911-9.473-17.911-21.113c0-11.641,8.034-21.113,17.911-21.113c2.622,0,5.123,0.664,7.386,1.858V32.814H125.855z
M115.943,64.238c-1.229-4.156-4.203-7.032-7.386-7.032c-4.335,0-7.999,5.128-7.999,11.2c0,6.07,3.663,11.201,7.999,11.201
c3.168,0,6.157-2.877,7.386-7.023V64.238z”/>
<path id =”g” fill=”#303030″ d=”M164.614,72.375l-24.733,0.959c0.512,1.124,1.206,2.148,2.049,3.04c4.015,4.214,11.532,4.379,16.752,0.346
l6.047,7.865c-4.329,3.338-9.516,4.99-14.588,4.99c-5.766,0-11.383-2.148-15.398-6.378c-4.246-4.461-6.36-10.688-5.783-17.067
c0.562-6.161,3.586-11.812,8.113-15.116c6.047-4.444,16.405-5.204,22.568,1.272c5.352,5.618,5.352,13.349,5.22,15.596
L164.614,72.375z M154.47,62.842c-0.363-1.287-0.975-2.642-2-3.716c-1.106-1.173-2.742-1.619-4.41-1.619
c-1.95,0-3.949,0.628-5.139,1.503c-1.404,1.025-2.528,2.578-3.238,4.412L154.47,62.842z”/>
<path id =”g” fill=”#303030″ d=”M194.139,49.62l-4.096,8.83c-1.587-0.864-4.116-0.651-5.95,0.284c-3.743,1.909-5.968,5.896-5.968,10.099
v20.201h-9.913V47.842h9.913v3.957C181.176,47.293,188.588,46.599,194.139,49.62z”/>
<path id =”g” fill=”#27A6DF” d=”M216.713,73.8l9.194,3.706c-2.987,7.411-9.187,12.014-16.179,12.014c-9.877,0-17.91-9.472-17.91-21.112
c0-11.641,8.033-21.113,17.91-21.113c6.922,0,13.285,4.75,16.213,12.102l-9.209,3.667c-1.416-3.556-4.166-5.854-7.004-5.854
c-4.336,0-7.996,5.128-7.996,11.2c0,6.07,3.66,11.201,7.996,11.201C212.594,79.607,215.27,77.384,216.713,73.8z”/>
<path id =”g” fill=”#F79423″ d=”M260.73,76.854c-0.032,4.443,0.049,8.905,0.23,13.301h-9.929c-0.032-1.008-0.066-2.018-0.082-3.025
c0-0.003,0-0.008,0-0.013c-0.442,0.209-0.886,0.415-1.345,0.596c-2.199,0.868-5.14,1.529-8.221,1.529
c-2.691,0-5.49-0.505-7.996-1.818c-3.259-1.71-5.421-4.491-6.25-8.047c-1.4-5.996,2.01-12.231,8.293-15.159
c4.469-2.082,10.082-2.683,15.618-1.802c0-0.011,0-0.024,0-0.035c-0.034-1.634-0.166-2.477-0.495-3.039
c-1.687-2.841-8.625-3.073-17.266-0.578l-2.742-9.533c14.061-4.047,24.188-2.263,28.531,5.056c2.05,3.453,1.982,6.608,1.802,13.481
C260.814,70.146,260.75,73.102,260.73,76.854z M250.87,72.45c-4.027-0.914-8.226-0.655-11.25,0.753
c-1.636,0.764-3.183,2.396-2.827,3.924c0.171,0.729,0.507,1.152,1.2,1.518c1.829,0.959,5.33,0.891,7.975-0.152
c1.993-0.787,3.664-2.053,4.871-3.602C250.839,74.032,250.854,73.21,250.87,72.45z”/>
<path id =”g” fill=”#CE1C70″ d=”M291.055,49.62l-4.096,8.83c-1.586-0.864-4.116-0.651-5.949,0.284c-3.744,1.909-5.968,5.896-5.968,10.099
v20.201h-9.913V47.842h9.913v3.957C278.092,47.293,285.505,46.599,291.055,49.62z”/>
</g>
<g>
<path id =”g” fill=”#27A6DF” d=”M324.973,69.586l-23.854,6.598c0.756,0.977,1.666,1.815,2.689,2.488c4.873,3.184,12.229,1.62,16.387-3.497
l7.688,6.269c-3.451,4.24-8.122,7.039-13.059,8.199c-5.613,1.32-11.573,0.52-16.45-2.682c-5.154-3.369-8.64-8.947-9.536-15.288
c-0.865-6.128,0.784-12.32,4.434-16.574c4.867-5.711,14.776-8.823,22.261-3.931c6.495,4.242,8.267,11.768,8.651,13.986
L324.973,69.586z M312.915,62.631c-0.649-1.173-1.555-2.351-2.798-3.162c-1.346-0.889-3.04-0.947-4.665-0.566
c-1.897,0.448-3.698,1.515-4.656,2.64c-1.133,1.32-1.871,3.088-2.143,5.036L312.915,62.631z”/>
</g>
<ellipse id =”b” fill=”#CE1C70″ cx=”334.516″ cy=”66.015″ rx=”5.484″ ry=”5.695″/>
<g>
<path id =”b” fill=”#27A6DF” d=”M66.692,31.219c4.498,4.812,6.509,10.762,7.797,17.038c0.343,1.678,0.729,3.369,0.321,5.145
c-0.89,0.068-1.027-0.774-1.398-1.256c-2.28-2.972-4.771-5.725-7.96-7.749c-5.726-3.636-11.53-3.698-17.365-0.264
c-2.152,1.265-4.09,2.81-5.755,4.678c-0.564,0.634-0.936,0.798-1.599,0.023c-5.059-5.932-11.836-6.755-19.019-6.26
c-1.501,0.104-2.99,0.383-4.487,0.579c-0.288-0.702,0.254-1.055,0.526-1.471c4.837-7.406,10.772-13.635,19.034-17.227
c4.09-1.778,8.373-2.693,12.876-1.946C51.732,29.28,59.851,33.433,66.692,31.219z”/>
<path id =”b” fill=”#27A6DF” d=”M52.216,22.69c-0.312-1.609-0.953-3.151-0.814-4.846c0.381-4.709,2.736-8.062,7.095-9.759
c4.545-1.767,8.817-1.028,12.426,2.357c3.314,3.104,4.286,7.591,2.629,11.729C72.309,25.28,70,27.33,66.909,28.555
c-0.604,0.239-1.433,0.125-1.716,0.953c-1.292-0.708-2.707-0.183-4.059-0.403C57.078,28.444,54.363,25.976,52.216,22.69z”/>
<path id =”b” fill=”#15678C” d=”M52.216,22.69c2.147,3.286,4.862,5.754,8.918,6.416c1.352,0.22,2.767-0.305,4.059,0.403
c0.553,0.521,1.204,0.96,1.499,1.71c-6.841,2.214-14.959-1.938-17.029-8.709C50.513,22.569,51.365,22.629,52.216,22.69z”/>
</g>
</svg>
</pre>

Logo automatically transitions to a white colour and the illustrations become non visible.

CSS:

#g{
animation: animateG 2s linear forwards;
animation-delay: 1s;
}
#g:hover{
animation: animateGB 2s linear backwards;
}
#b{
animation: animateB 2s linear forwards;
animation-delay: 1s;
}
#b:hover{
animation: animateGB 2s linear backwards;
}
@keyframes animateB {
0% {
;
}
50% {
;
}
100% {
opacity: 0;
}
}
@keyframes animateG {
0% {
;
}
50% {
;
}
100% {
fill: white;
}
}
@keyframes animateBG {
0% {
;
}
50% {
;
}
100% {
}
}