CSS animations and transitions

Transcript

1. CSS анимации. Копнем поглубже. Денис Горбунов
2. Преимущества CSS 1. Простые 2. Доступные всем 3. Разнообразные 4. Нативная возможность браузера 2
3. Как делать? 3
4. Как делать? CSS-transitions и CSS-animations 4
5. Общее 1. Указываешь, какое свойство изменяется 2. Функция timing(easing) 3. Продолжительность 4. Отслеживание событий через JS 5. Анимирование 5
6. Различия 1. Вызов (triggering) 6
7. Различия 1. Вызов (triggering) 2. Повторение (loop) 7
8. Различия 1. Вызов (triggering) 2. Повторение (loop) 3. Точки контроля animation transition 8
9. Различия 1. Вызов (triggering) 2. Повторение (loop) 3. Точки контроля 4. Управление через JS 9
10. Управление через JS 1. getComputedStyle и getPropertyValue var box = document.getElementsByClassName('box')[0], computedStyle = window. getComputedStyle(box) , width = computedStyle. getPropertyValue('width') ; 01. 02. 03. 10
11. Управление через JS 1. getComputedStyle и getPropertyValue 2. transitionend и animationend 11
12. Какие свойства лучше анимировать? 12
15. Ссылки • CSS transition • CSS animation • CSS3: Animations vs. Transitions • Controlling CSS Animations and Transitions with JavaScript • High Performance Animations 15
16. Спасибо!