• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Sergey Chikuyonok  Css Animation
 

Sergey Chikuyonok Css Animation

on

  • 3,068 views

 

Statistics

Views

Total Views
3,068
Views on SlideShare
2,465
Embed Views
603

Actions

Likes
4
Downloads
39
Comments
0

9 Embeds 603

http://ritconf.ru 471
http://t4ka.ru 59
http://www.ritconf.ru 24
http://www.slideshare.net 22
http://new.profyclub.ru 14
http://profyclub.ontico.ru 9
http://2011.ritconf.ru 2
http://ritconf.ontico.ru 1
http://rit-conf.org 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Sergey Chikuyonok  Css Animation Sergey Chikuyonok Css Animation Presentation Transcript

    • 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-function transition-delay
    • События CSS Transitions webkitTransitionEnd oTransitionEnd
    • CSS Transitions Пример a { color: #f00; -webkit-transition: color 0.5s ease-out 0s; } a:hover { color: #0f0; }
    • CSS Animations
    • CSS Animations • Более сложные движения • Зацикливание анимации
    • CSS Animations animation-name animation-duration -webkit- animation-delay animation-iteration-count animation-direction
    • События CSS Animations webkitAnimationStart webkitAnimationIteration webkitAnimationEnd
    • 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; } }
    • Особенности использования CSS-анимаций
    • Определяем 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>
    • Safari/WebKit на OS X 10.6 / iPhone • поддержка 3D transforms CSS Transforms + CSS Transitions/Animations = • Аппаратное ускорение • Субпиксельное сглаживание • Не относится к Google Chrome и Safari на Mac OS X 10.5
    • -webkit-transform: rotateY(40deg); 3D Transform 2D Transform
    • Определяем наличие 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>
    • Меняем начальное значение свойства с CSS Transition A -webkit-transition-property: top, left; B -webkit-transition-duration: 2s; C
    • Меняем начальное значение свойства с CSS Transition A // точка B block.style.left = ‘20px’; block.style.top = ‘40px’; B // точка C block.style.left = ‘100px’; C block.style.top = ‘80px’;
    • Меняем начальное значение свойства с 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);
    • Останавливаем С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>
    • Останавливаем С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);
    • Останавливаем 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