Animate

Animate - об'єкт анімації елемента технології Web Animation API.

Синтаксис:

obAnimate = Element.animate(keyframes, options);

Параметри:

Element - об'єкт Element.

obAnimate - зміна яка отримує об'єкт Animate.

keyframes - об'єкт або масив об'єктів з властивостями стилів анімації.

options - ціле число, що представляє тривалість анімації (у мілісекундах) або  об'єкт який містить одину або декілька властивостей. Детальніше про властивості об'єкта дивіться у Element.animate.

Опис:

Animate об'єкт анімації елемента, отриманий методом Element.animate().

Об'єкт призначений для керування анімацією у елементі.

Приклад:

#test
var el = document.getElementById('test'); if(el.animate){ var obAnimate=el.animate([{color:'red'},{color:'blue'}],1800); alert(obAnimate); }else alert('Ваш браузер НЕ підтримує Animate');

Приклад анімації появлення слів тексту:

textAnime=function(a,b,c){ var mas=b.split(' '); var span=document.createElement('span'); span.style.color='#ffffff'; span.innerText=mas[0]+' '; //анімація елементу span.animate([{color:'#ffffff'},{color:'#000000'}],{duration:c,fill:'forwards'}); a.appendChild(span); mas.shift(); if(mas.length>0)setTimeout(textAnime,c,a,mas.join(' '),c); } textAnime(document.getElementById('test2'), "Приклад Web Animation API за допомогою JavaScript.", 800);

Приклад обертання елемента навколо осі:

var el=document.getElementById('test3'); var anime=el.animate([{transform: 'rotate(0rad)',backgroundColor:'#ffffff',color:'#000000'},{transform: 'rotate(6.3rad)',backgroundColor:'#356688',color:'#ffffff'}],5500); anime.onfinish=function(){ this.reverse(); //зворотня анімація }