CSS Анимация


               Сергей Чикуёнок
                  «Аймобилко»
Основные
     компоненты

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

CSS Transforms    4   10.5   3.6




CSS Transitions   4   10.5




CSS Animations    4
CSS Transforms
CSS Transforms
 translate

 rotate

 scale

 skew
CSS Transforms


-webkit-   transform
  -moz-
    -o-    transform-origin
CSS Transforms
Пример

  -webkit-transform: scale(0.7) rotate(30deg);
  -webkit-transform-origin: 10% 100%;
CSS Transitions
CSS Transitions
• Плавный переход от одного значения
  к другому
• Простое решение простых задач
CSS Transitions

           transition-property
-webkit-   transition-duration
    -o-
           transition-timing-functi...
События
  CSS Transitions

webkitTransitionEnd
oTransitionEnd
CSS Transitions
Пример

  a {
        color: #f00;
        -webkit-transition: color 0.5s ease-out 0s;
  }
  a:hover {
   ...
CSS Animations
CSS Animations
• Более сложные движения
• Зацикливание анимации
CSS Animations
           animation-name
           animation-duration
-webkit-   animation-delay
           animation-ite...
События
CSS Animations

webkitAnimationStart
webkitAnimationIteration
webkitAnimationEnd
CSS Animations
Пример
  #flying-block {
      -webkit-animation-name: example-anim;
      -webkit-animation-duration: 2s;
...
Особенности
использования
CSS-анимаций
Определяем
             vendor prefix
<script type="text/javascript">
   var vendor_prefix = null,
       div = document.cr...
Safari/WebKit
     на OS X 10.6 / iPhone
• поддержка 3D transforms
CSS Transforms + CSS Transitions/Animations =
• Аппарат...
-webkit-transform: rotateY(40deg);




3D Transform                         2D Transform
Определяем наличие
  3D-трансформаций
<style type="text/css">
    #transform3d-beacon {
        width: 0;
   }

   @media ...
Меняем начальное значение
     свойства с CSS Transition
         A



                 -webkit-transition-property: top, ...
Меняем начальное значение
     свойства с CSS Transition
         A
                 // точка B
                 block.sty...
Меняем начальное значение
     свойства с CSS Transition
                 // точка B

         A       block.style.left = ...
Останавливаем
           СSS Transition
<style type="text/css">
    #block {
         -webkit-transition: left 5s linear 0...
Останавливаем
                 СSS Transition
...но технически анимация не остановится

    -webkit-transition: left 5s li...
Останавливаем
        CSS Animation


-webkit-animation-play-state: running | paused;
Проблемы,
  возникающие
при использовании
  CSS-анимаций
Проблемы


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


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


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


      Размер блока:
      2001×1000
Проблемы
Совет



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



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


Шифты в Opera 10.5 отрисовываются иначе
на блоках с CSS Transforms
(пример)
Вопросы?
serge.che@gmail.com
http://chikuyonok.ru
Upcoming SlideShare
Loading in …5
×

Sergey Chikuyonok Css Animation

3,198 views

Published on

  • Be the first to comment

Sergey Chikuyonok Css Animation

  1. 1. CSS Анимация Сергей Чикуёнок «Аймобилко»
  2. 2. Основные компоненты CSS Transforms CSS Transitions CSS Animations
  3. 3. Основные компоненты CSS Transforms 4 10.5 3.6 CSS Transitions 4 10.5 CSS Animations 4
  4. 4. CSS Transforms
  5. 5. CSS Transforms translate rotate scale skew
  6. 6. CSS Transforms -webkit- transform -moz- -o- transform-origin
  7. 7. CSS Transforms Пример -webkit-transform: scale(0.7) rotate(30deg); -webkit-transform-origin: 10% 100%;
  8. 8. CSS Transitions
  9. 9. CSS Transitions • Плавный переход от одного значения к другому • Простое решение простых задач
  10. 10. CSS Transitions transition-property -webkit- transition-duration -o- transition-timing-function transition-delay
  11. 11. События CSS Transitions webkitTransitionEnd oTransitionEnd
  12. 12. CSS Transitions Пример a { color: #f00; -webkit-transition: color 0.5s ease-out 0s; } a:hover { color: #0f0; }
  13. 13. CSS Animations
  14. 14. CSS Animations • Более сложные движения • Зацикливание анимации
  15. 15. CSS Animations animation-name animation-duration -webkit- animation-delay animation-iteration-count animation-direction
  16. 16. События CSS Animations webkitAnimationStart webkitAnimationIteration webkitAnimationEnd
  17. 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. 18. Особенности использования CSS-анимаций
  19. 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. 20. Safari/WebKit на OS X 10.6 / iPhone • поддержка 3D transforms CSS Transforms + CSS Transitions/Animations = • Аппаратное ускорение • Субпиксельное сглаживание • Не относится к Google Chrome и Safari на Mac OS X 10.5
  21. 21. -webkit-transform: rotateY(40deg); 3D Transform 2D Transform
  22. 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. 23. Меняем начальное значение свойства с CSS Transition A -webkit-transition-property: top, left; B -webkit-transition-duration: 2s; C
  24. 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. 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. 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. 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. 28. Останавливаем CSS Animation -webkit-animation-play-state: running | paused;
  29. 29. Проблемы, возникающие при использовании CSS-анимаций
  30. 30. Проблемы Наличие блока с -webkit-transform «ломает» position: fixed на странице в Safari
  31. 31. Проблемы Сильная дискретность движения в Opera 10.5 (видео)
  32. 32. Проблемы Размер блока: 2000×1000
  33. 33. Проблемы Размер блока: 2001×1000
  34. 34. Проблемы Совет Избегайте анимации блоков, ширина или высота которых больше 2000 пикселей (для iPhone – 1024 пикселя)
  35. 35. Проблемы
  36. 36. Проблемы
  37. 37. Проблемы Совет для iPhone Старайтесь одновременно анимировать как можно меньше объектов, по возможности переносите анимацию на контейнер.
  38. 38. Проблема Шифты в Opera 10.5 отрисовываются иначе на блоках с CSS Transforms (пример)
  39. 39. Вопросы? serge.che@gmail.com http://chikuyonok.ru

×