Sergey Chikuyonok Css Animation
- 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
- 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%;
- 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
- 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; } }
- 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 (пример)