1. CSS Анимация
Сергей Чикуёнок
«Аймобилко»

2. Основные
компоненты
CSS Transforms
CSS Transitions
CSS Animations

3. Основные
компоненты
CSS Transforms 4 10.5 3.6
CSS Transitions 4 10.5
CSS Animations 4

4. CSS Transforms

5. CSS Transforms
translate
rotate
scale
skew

6. CSS Transforms
-webkit- transform
-moz-
-o- transform-origin

7. CSS Transforms
Пример
-webkit-transform: scale(0.7) rotate(30deg);
-webkit-transform-origin: 10% 100%;

8. CSS Transitions

9. CSS Transitions
• Плавный переход от одного значения
к другому
• Простое решение простых задач

10. CSS Transitions
transition-property
-webkit- transition-duration
-o-
transition-timing-function
transition-delay

11. События
CSS Transitions
webkitTransitionEnd
oTransitionEnd

12. CSS Transitions
Пример
a {
color: #f00;
-webkit-transition: color 0.5s ease-out 0s;
}
a:hover {
color: #0f0;
}

13. CSS Animations

14. CSS Animations
• Более сложные движения
• Зацикливание анимации

15. CSS Animations
animation-name
animation-duration
-webkit- animation-delay
animation-iteration-count
animation-direction

16. События
CSS Animations
webkitAnimationStart
webkitAnimationIteration
webkitAnimationEnd

17. CSS Animations
Пример
#flying-block {
-webkit-animation-name: example-anim;
-webkit-animation-duration: 2s;
}
@-webkit-keyframes example-anim {
0% { left: 0px; top: 0px; }
50% { left: 200px; top: 100px; }
100% { left: 100px; top: 200px; }
}

18. Особенности
использования
CSS-анимаций

19. Определяем
vendor prefix
<script type="text/javascript">
var vendor_prefix = null,
div = document.createElement('div');
if (typeof(div.style.webkitTransform) != 'undefined')
vendor_prefix = '-webkit-';
else if (typeof(div.style.MozTransform) != 'undefined')
vendor_prefix = '-moz-';
else if (typeof(div.style.OTransform) != 'undefined')
vendor_prefix = '-o-';
else if (typeof(div.style.transform) != 'undefined')
vendor_prefix = '';
if (vendor_prefix !== null) {
// есть поддержка CSS Transforms
}
</script>

20. Safari/WebKit
на OS X 10.6 / iPhone
• поддержка 3D transforms
CSS Transforms + CSS Transitions/Animations =
• Аппаратное ускорение
• Субпиксельное сглаживание
• Не относится к Google Chrome
и Safari на Mac OS X 10.5

21. -webkit-transform: rotateY(40deg);
3D Transform 2D Transform

22. Определяем наличие
3D-трансформаций
<style type="text/css">
#transform3d-beacon {
width: 0;
}
@media screen and (-webkit-transform-3d) {
#transform3d-beacon {
width: 100px;
}
}
</style>
<script type="text/javascript">
var beacon = document.getElementById('transform3d-beacon');
var has_3d_support = beacon.offsetWidth > 0 && !window.opera;
</script>

23. Меняем начальное значение
свойства с CSS Transition
A
-webkit-transition-property: top, left;
B
-webkit-transition-duration: 2s;
C

24. Меняем начальное значение
свойства с CSS Transition
A
// точка B
block.style.left = ‘20px’;
block.style.top = ‘40px’;
B
// точка C
block.style.left = ‘100px’;
C block.style.top = ‘80px’;

25. Меняем начальное значение
свойства с CSS Transition
// точка B
A block.style.left = ‘20px’;
block.style.top = ‘40px’;
block.style.webkitTransitionDuration = ‘0s’;
B
setTimeout(function(){
// точка C
block.style.left = ‘100px’;
C
block.style.top = ‘80px’;
block.style.webkitTransitionDuration = ‘2s’;
}, 1);

26. Останавливаем
СSS Transition
<style type="text/css">
#block {
-webkit-transition: left 5s linear 0s;
}
</style>
<script type="text/javascript">
function getCSS(elem, property) {
var cs = window.getComputedStyle(elem, null);
return cs.getPropertyValue(property);
}
var block = document.getElementById('block');
// запуск анимации
block.style.left = ‘500px’;
// останавка анимации
block.style.left = getCSS(block, ‘left’);
</script>

27. Останавливаем
СSS Transition
...но технически анимация не остановится
-webkit-transition: left 5s linear 0s;
block.style.left = ‘500px’;
setTimeout(function(){
block.style.left = getCSS(block, ‘left’);
}, 2000);
block.addEventListener(‘webkitTransitionEnd’, function(){
// покажет alert через 5 сек. после «остановки»
alert(‘stopped’);
}, false);

28. Останавливаем
CSS Animation
-webkit-animation-play-state: running | paused;

29. Проблемы,
возникающие
при использовании
CSS-анимаций

30. Проблемы
Наличие блока с -webkit-transform
«ломает» position: fixed на странице
в Safari

31. Проблемы
Сильная дискретность движения
в Opera 10.5
(видео)

32. Проблемы
Размер блока:
2000×1000

33. Проблемы
Размер блока:
2001×1000

34. Проблемы
Совет
Избегайте анимации блоков, ширина или высота
которых больше 2000 пикселей
(для iPhone – 1024 пикселя)

35. Проблемы

36. Проблемы

37. Проблемы
Совет для iPhone
Старайтесь одновременно анимировать как
можно меньше объектов, по возможности
переносите анимацию на контейнер.

38. Проблема
Шифты в Opera 10.5 отрисовываются иначе
на блоках с CSS Transforms
(пример)

39. Вопросы?
serge.che@gmail.com
http://chikuyonok.ru