Анимация без использования JQuery

Как сделать функцию JQuery animate без JQuery? С CSS свойствами всё понятно: их можно через transition и animation нарисовать, но как мне плавно изменить HTML?
Как мне плавно в течении 3-ёх секунд изменить значение прогресс бара и цифру возле него? Т.е. как плавно изменить ширину и значение возле бара с 10% до 80% за 3 секунды?


.progress {
display: inline-block
width: 200px
height: 12px
border: 1px solid black
border-radius: 6px
overflow: hidden
}
.progress_bar {
display: inline-block
width: 10%
height: 14px
background-color: #3f51b5
}

.progress_val {
display: inline-block
}



Ответ
В JS есть специальная функция requestAnimFrame, которая позволяет создать анимационные эффекты.


// Указываем начальное время анимации
var start = performance.now()

requestAnimationFrame(function animate(time) {
// Высчитываем процент завершённости: высчитываем сколько прошло времени и делим на нужную продолжительность
var timeFraction = (time - start) / 3000
if (timeFraction > 1) timeFraction = 1

// Получаем элементы
var Bar = document.querySelector('.progress_bar'),
Val = document.querySelector('.progress_val')

// Указываем начальное значение
var oldVal = 10,
// Указываем новое значение
newVal = 80

// Применяем
Bar.style.width = (oldVal + ((newVal - oldVal) * timeFraction)) + '%'
Val.innerHTML = (oldVal + ((newVal - oldVal) * timeFraction)) + '%'

// Если анимация незаконченна, запускаем новый шаг
if (timeFraction < 1) {
requestAnimationFrame(animate)
}
}) .progress {
display: inline-block
width: 200px
height: 12px
border: 1px solid black
border-radius: 6px
overflow: hidden
}

.progress_bar {
display: inline-block
width: 10%
height: 14px
background-color: #3f51b5
}

.progress_val {
display: inline-block
}


Подробнее про создание анимаций с помощью этой функции: https://learn.javascript.ru/js-animation.
Так же следует использовать полифиллы, т.к. эта функция начинает работать только в IE10. Полифилл:
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60) } })()
Или же можно воспользоваться готовым плагином. К вашему вопросу подойдёт и самый простой плагин. К примеру, можно использовать мой: https://github.com/yuri-spivak/animations-in-javascript


new Animate({
duration: 3000,
step: function (p) {
// Получаем элементы
var Bar = document.querySelector('.progress_bar'),
Val = document.querySelector('.progress_val')

// Указываем начальное значение
var oldVal = 10,
// Указываем новое значение
newVal = 80

// Применяем
Bar.style.width = (oldVal + ((newVal - oldVal) * p)) + '%'
Val.innerHTML = Math.round(oldVal + ((newVal - oldVal) * p)) + '%'
}
}) .progress {
display: inline-block
width: 200px
height: 12px
border: 1px solid black
border-radius: 6px
overflow: hidden
}
.progress_bar {
display: inline-block
width: 10%
height: 14px
background-color: #3f51b5
}

.progress_val {
display: inline-block
}




step – вызывается при каждом шаге анимации и возвращает процент завершённости анимации