Is there any way to create video-like animation with javascript ?

Question

As we know, The common animation in the web is event-driven. We can easily play animation with an event.

But I want to know that is there any way to create video-like animation with javascript?

What I want is when I open a page, the browser preload all my meterial(images and music). After that, the animation play automatically.

I can only think out an inefficient way by using css3 transition animation and javascript to do this.

Define css3 transition animation.

.test1 {
    -webkit-transition: all 0.1s ease-in;
}

.test2 {
    -webkit-transition: all 0.3s ease-in;
}

.test3 {
    -webkit-transition: all 0.5s ease-in;
}

Use setTimeout function

var ele1 = document.getElementById('t1');
var ele2 = document.getElementById('t2');
var ele3 = document.getElementById('t3');

setTimeout(function () {
    ele1.className += 'test1';
}, 1000);

setTimeout(function () {
    ele2.className += 'test2';
}, 3000);

setTimeout(function () {
    ele3.className += 'test3';
}, 5000);

Is there any third-party tools can do it?

Answer 1

您可以使用Adobe Edge或Google的Web Designer轻松创建此类动画