Css3 анимация с ключевыми кадрами, не анимирующими в Safari

Question

Я создал простую анимацию проактивного бара, используя ключевые кадры. Кажется, не работает на windows safari 5.1.7, также на mac safari (не может предоставить версию). Вот скрипка, которую я создал http://jsfiddle.net/26tgnrff/4/. Некоторое время копался, но не мог найти решение.

Спасибо.

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

У вас есть дополнительные точки с запятой в конце ваших ключевых кадров - должно быть, например,

@-webkit-keyframes'photoshop' { 
    from { 
     width: 5px; 
    } 
    to { 
     width: 77.5%; 
    } 
    /* no semicolon here */ 
} 

Обновлено скрипку http://jsfiddle.net/26tgnrff/8/

Далее, Safari 5 вы не можете анимировать width в процентах. Если вы используете px, то вместо % анимация будет работать.

Однако вы можете достичь аналогичного эффекта с масштабированием вместо этого, и тогда вам не нужны фактических значений ключевых кадров:

@-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); 
    } 
} 

Обновлено скрипка (только анимировать первую строку в качестве примера) http://jsfiddle.net/26tgnrff/9/