CSS/js animation

Question

So, I have a slider and when slider.value>X I need to smoothly increase width of div object from 200px to 500px. Then when slider.value<X make the same backwards. How can I make such animation?

Answer 1

Two ways of doing this are:
1. Using CSS, give the div a 'transition: 1s' property. Then alter the width using javascript:
document.getElementById("mydiv").style.width = "500px";
2. Use jQuery to animate the change. It would be something like:
$("div).animate({width:"500px"},1000);
See the jQuery course for more info.

Answer 2

Thank you, friend!

Answer 3

Maybe you also know some way to change CSS “animation-timing-function” property?

Answer 4

in the same way