Element.animate()

Element.animate() - анімація для елемента.

Синтаксис:

Element.animate(keyframes, options);

Параметри:

Element - об'єкт Element.

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

Приклад об'єкту://рекомендований формат параметру Element.animate([ { // from opacity: 0, color: "#111111"}, { // to opacity: 1, ​ color: "#999999"} ], 2000); //не всі браузери підтримують даний формат параметру (лише Mozilla підтримує) Element.animate({ opacity: [ 0, 1 ], // [ from, to ] color: [ "#111111", "#999999" ] // [ from, to ] }, 2000);

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

Опис:

animate() метод об'єкту Element який створює анімацію для елемента. Повертає об'єкт Animate.

Метод створює анімацію елемента за допогою зміни CSS стилів елемента.

Основними параметрами вказуються початкові (from) і кінцеві (to) властивості CSS стилю, а також тривалість анімації.

Не підтримують старі браузери.

Приклад:

#test
var el=document.getElementById('test'); if(el.animate){ var ob=el.animate([{color:'#ff4576'},{color:'#af9887'}],3000); alert(ob); }else alert('Ваш браузер не підтримує animate'); var el=document.getElementById('test'); if(el.animate){ el.animate([{color:'#ff4576'},{color:'#a0f978'}],3000); }else alert('Ваш браузер не підтримує animate');
#test2
var el=document.getElementById('test2'); if(el.animate){ el.animate({backgroundColor:['#12f','#fae7a0']},5000); //деякі браузери не підтримують цей формат параметру }else alert('Ваш браузер не підтримує animate');
#test3
var el=document.getElementById('test3'); if(el.animate){ el.animate([{color:'#005432'},{color:'#ef6789'}],{duration: 1500, iterations: Infinity}); }else alert('Ваш браузер не підтримує animate');

Анімація фону веб-сторінки:

document.body.animate([{backgroundColor:'#ffffff'},{backgroundColor:'#32b9e6'}],{duration:5000,fill: 'forwards'});

#test4 Приклад ефекту тексту тіні.

#test4{background-color: #123; padding:50px; font-size: 28pt; color: #ffffff; font-weight: 700; } var el = document.getElementById('test4'); if(el.animate){ el.animate([{textShadow:'0px 0px 10px #ffffff'},{textShadow:'0px 0px 12px #fffffe'},{textShadow:'0px 0px 25px #ffffff'}, {textShadow:'0px 0px 25px #ffffff'},{textShadow:'0px 0px 25px #ffffff'},{textShadow:'0px 0px 25px #ffffff'},{textShadow:'0px 0px 25px #ffffff'},{textShadow:'0px 0px 25px #ffffff'}, {textShadow:'0px 0px 50px #ffffff'},{textShadow:'0px 0px 50px #ffffff'},{textShadow:'0px 0px 50px #7B96B8'},{textShadow:'0px 0px 150px #7B96B8'},{textShadow:'0px 10px 100px #7B96B8'}, {textShadow:'0px 10px 100px #7B96B8'},{textShadow:'0px 10px 100px #7B96B8'},{textShadow:'0px 10px 100px #7B96B8'},{textShadow:'0px -10px 100px #7B96B8'},{textShadow:'0px -10px 100px #7B96B8'}],{duration:650,iterations:'Infinity'}); }else alert('Ваш браузер Не підтримує Animate');