sergey chikuyonok css animation
DESCRIPTION
TRANSCRIPT
CSS Анимация
Сергей Чикуёнок«Аймобилко»
Основные компоненты
CSS Transforms
CSS Transitions
CSS Animations
Основные компоненты
CSS Transforms
CSS Transitions
CSS Animations
10.5 3.64
10.54
4
CSS Transforms
CSS Transforms
translate
rotate
scale
skew
CSS Transforms
transform
transform-origin
-webkit--moz-
-o-
Пример
CSS Transforms
-webkit-transform: scale(0.7) rotate(30deg);
-webkit-transform-origin: 10% 100%;
CSS Transitions
CSS Transitions
• Плавный переход от одного значения к другому
• Простое решение простых задач
CSS Transitions
transition-property
transition-duration
transition-timing-function
transition-delay
-webkit--o-
События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
animation-delay
animation-iteration-count
animation-direction
-webkit-
События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
B
C
-webkit-transition-property: top, left;-webkit-transition-duration: 2s;
Меняем начальное значение свойства с CSS Transition
A
B
C
// точка Bblock.style.left = ‘20px’;
block.style.top = ‘40px’;
// точка C
block.style.left = ‘100px’;block.style.top = ‘80px’;
Меняем начальное значение свойства с CSS Transition
A
B
C
// точка Bblock.style.left = ‘20px’;
block.style.top = ‘40px’;block.style.webkitTransitionDuration = ‘0s’;
setTimeout(function(){// точка C
block.style.left = ‘100px’;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
(пример)
