Your SlideShare is downloading. ×
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Sergey Chikuyonok  Css Animation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Sergey Chikuyonok Css Animation

2,464

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,464
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
42
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×