Css3 animation with keyframes not animating in Safari - css

Question

I have created simple progress-bar alike animation using keyframes. Seems to not work on windows safari 5.1.7, also on mac safari (can't provide version). Here is fiddle i created http://jsfiddle.net/26tgnrff/4/ . Been digging around for some while, but cant find solution.
Thanks.
html:
<div class="content">
<h3>Animation demo</h3>
<ul id="skill">
<li><span class="animated expand y2003 green"></span>
</li>
<li><span class="animated expand y2006 purple"></span>
</li>
<li><span class="animated expand y2008 green"></span>
</li>
<li><span class="animated expand y2011 purple"></span>
</li>
<li><span class="animated expand y2014 green"></span>
</li>
</ul>
</div>
css:
.expand {
height: 25px;
margin: 2px 0;
position: absolute;
}
.expand.green {
background: #8DD005;
box-shadow: 0px 0px 7px 0px #86a624;
}
.expand.purple {
background: #5a3266;
box-shadow: 0px 0px 7px 0px #5a3266;
}
.animated.y2003 {
width: 15%;
-moz-animation: html5 2s ease-out;
-webkit-animation: html5 2s ease-out;
animation: html5 2s ease-out;
}
.animated.y2006 {
width: 52.5%;
-moz-animation: css3 2s ease-out;
-webkit-animation: css3 2s ease-out;
animation: css3 2s ease-out;
}
.animated.y2008 {
width: 84.7%;
-moz-animation: jquery 2s ease-out;
-webkit-animation: jquery 2s ease-out;
animation: jquery 2s ease-out;
}
.animated.y2011 {
width: 77.5%;
-moz-animation: photoshop 2s ease-out;
-webkit-animation: photoshop 2s ease-out;
animation: photoshop 2s ease-out;
}
.animated.y2014 {
width: 100%;
-moz-animation: dreamweaver 2s ease-out;
-webkit-animation: dreamweaver 2s ease-out;
animation: dreamweaver 2s ease-out;
}
#-moz-keyframes html5 {
from {
width: 5px;
}
to {
width: 15%;
}
}
#-moz-keyframes css3 {
from {
width: 5px;
}
to {
width: 52.5%;
}
}
#-moz-keyframes jquery {
from {
width: 5px;
}
to {
width: 84.7%;
}
}
#-moz-keyframes photoshop {
from {
width: 5px;
}
to {
width: 77.5%;
}
}
#-moz-keyframes dreamweaver {
from {
width: 5px;
}
to {
width: 100%;
}
}
#-webkit-keyframes'html5' {
from {
width: 5px;
}
to {
width: 15%;
}
}
#-webkit-keyframes'css3' {
from {
width: 5px;
}
to {
width: 52.5%;
}
}
#-webkit-keyframes'jquery' {
from {
width: 5px;
}
to {
width: 84.7%;
}
}
#-webkit-keyframes'photoshop' {
from {
width: 5px;
}
to {
width: 77.5%;
}
}
#-webkit-keyframes'dreamweaver' {
from {
width: 5px;
}
to {
width: 100%;
}
}

Answer 1

You have extra semicolons at the end of your keyframes - should be e.g.
#-webkit-keyframes'photoshop' {
from {
width: 5px;
}
to {
width: 77.5%;
}
/* no semicolon here */
}
Updated fiddle http://jsfiddle.net/26tgnrff/8/
Further, on Safari 5 you can't animate width to a percentage value. If you use px values instead of % the animation will work.
However you can achieve a similar effect with scaling instead, and then you don't need the actual values in the keyframes:
#-webkit-keyframes'html5' {
from {
-webkit-transform-origin: 0 0;
-webkit-transform: scale(0,1);
}
to {
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1,1);
}
}
Updated fiddle (only animating the first bar as an example) http://jsfiddle.net/26tgnrff/9/