Element.animate - JavaScript довідка

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

id - рядок з назвою id анімації.
delay - затримка початку анімації в мілісекундах. Значення за замовчуванням 0.
direction - рух анімації вперед - "normal", назад - "reverse", перемикає напрям після кожної ітерації "alternate", або рухається назад і перемикає напрямок після кожної ітерації "alternate-reverse". За умовчанням до "normal".
duration - тривалість анімації в мілісекундах. Значення за умовчанням дорівнює 0. Анімація не буде працювати, якщо це значення буде 0.
easing - швидкість зміни анімації з часом. Приймає наперед задані значення "linear", "ease", "ease-in","ease-out", і "ease-in-out", або призначене для користувача "cubic-bezier" значення ,наприклад "cubic-bezier(0.42, 0, 0.58, 1)". За умовчанням "linear".
endDelay - кількість мілісекунд для затримки після закінчення анімації. Це, перш за все, використовується при послідовності анімації на основі часу закінчення іншої анімації. Значення за замовчуванням 0.
fill - чи ефекти анімації повинні відображатися елементами перед відтворенням - "backwards", зберігаються після того, як анімація завершила відтворення - "forwards", або "both". За умовчанням до "none".
iterationStart - описує, на якому етапі ітерації мусить починатися анімація. 0,5 означатиме початок на півдорозі через першу ітерацію, і при цьому встановленому значенні анімація з 2 ітераціями завершиться на півдорозі через третю ітерацію. Значення за замовчуванням 0.0.
iterations - кількість разів повторення анімації. Значення за умовчанням 1 і може також мати значення Infinity для безкінечного повтору.

Опис:

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');