Tag Archives: анимация
CSS-анимация разных вращений
Всё сводится к подбору нужной перспективы у контейнера (http://www.w3.org/TR/css3-transforms/#perspective-property) perspective: 300px; -webkit-perspective: 300px; А для самого элемента к подбору точки вращения (http://www.w3.org/TR/css3-transforms/#transform-origin-property) transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; и повороту по нужной оси на нужный угол (http://www.w3.org/TR/css3-transforms/#funcdef-rotate) transform: rotateX(90deg); -webkit-transform: rotateX(90deg);
Javascript-события при анимации
http://www.sitepoint.com/css3-animation-javascript-event-handlers/ Особенно полезна эта табличка про совместимости браузеров и префиксы: W3C standard Firefox webkit Opera IE10 animationstart animationstart webkitAnimationStart oanimationstart MSAnimationStart animationiteration animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration animationend animationend webkitAnimationEnd oanimationend MSAnimationEnd
Функции анимации по кривым Безье
http://easings.net/ru — хорошо описаны различные функции анимации css-свойств с демонстрацией. animation
Оптимизация DOM анимации. Приоритетность оптимизаций.
Источник — http://www.xiper.net/collect/js-plugins/overclock-site/optimizacia-dom-animacii.html Постарался упорядочить действия, направленные на оптимизацию DOM/CSS анимации, в порядке эффективности. Чем выше оптимизация в списке, тем больший прирост производительности она обычно дает.
JS-Библиотека для создания CSS3-анимаций
https://github.com/jlongster/css-animations.js Позволяет делать анимации примерно так: // Changing an animation var anim = CSSAnimations.get(‘pulse’); anim.setKeyframe(‘100%’, { ‘background-color’: ‘red’ }); // Dynamically creating and applying an animation var anim = CSSAnimations.create(); anim.setKeyframe(‘0%’, { transform: ‘translateY(0)’ }); anim.setKeyframe(‘70%’, { transform: ‘translateY(50px)’ }); anim.setKeyframe(‘100%’, { transform: ‘translateY(150px)’ }); $(el).css({ ‘animation-name’: anim.name, ‘animation-duration’: ‘1s’ }); $(el).on(‘animationend’, function() { CSSAnimations.remove(anim.name); …
requestAnimationFrame для оптимизации анимации в браузере
Это замена обычной покадровой отрисовки по setTimeout. Пример: (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame; })(); var start = window.mozAnimationStartTime; // Only supported in FF. Other browsers can use something like Date.now(). function step(timestamp) { var progress = timestamp — start; d.style.left = Math.min(progress/10, 200) + «px»; …