Анимация индикаторов выполнения с помощью CSS ⇐ CSS

[Anonymous]

Итак, на этой странице у меня есть несколько разных индикаторов выполнения — http://kaye.at/play/goals

Вот мои HTML и CSS: р>

Код: Выделить всё

.meter {
height: 5px;
position: relative;
background: #f3efe6;
z-index: 0;
margin-top: -5px;
overflow: hidden;
}

.meter > span {
z-index: 50;
display: block;
height: 100%;
background-color: #e4c465;
position: relative;
overflow: hidden;
}

Я хочу просто анимировать индикатор выполнения, чтобы он медленно поднимался от 0% до любого процентного значения, а не просто появлялся там, но мне бы хотелось сделайте это максимально простым способом. Какой у меня лучший вариант и возможно ли это с текущим кодом, который я использую?

Подробнее здесь: https://stackoverflow.com/questions/159 ... s-with-css