SVG анимации — CSS, SMIL и Snap.svg

Долгожданный ролик про анимацию SVG в вебе. Рассмотрим три основных способа: CSS анимации, SMIL анимации и JavaScript анимации на примере Snap.svg. Обо всех плюсах и минусах каждого способа смотрите в ролике! Подробнее читайте по ссылке: http://uwebdesign.ru/svg-animation. Полезные ссылки: • SVGO инстурмент для оптимизации: https://jakearchibald.github.io/svgomg/ • Анимируем SVG с помощью CSS: http://css-tricks.com/animating-svg-css/ • Анимируем SVG прорисовку линий: http://css-tricks.com/svg-line-animation-works/ • Библиотека Walkway.js: http://www.connoratherton.com/walkway • Плагин Lazy Line Painter: http://lazylinepainter.info • Гайд по SMIL анимациям: http://css-tricks.com/guide-svg-animations-smil/ • SVG Morphing Animations: http://codepen.io/noahblon/blog/an-intro-to-svg-animation-with-smil • Snap.svg: http://snapsvg.io • Анимированный круг с процентами: http://codepen.io/rachsmith/pen/BqpCd • Туториал на Codyhouse про анимацию нескольких элементов по очереди: http://codyhouse.co/gem/animate-svg-icons-with-css-and-snap/ • Советы по созданию Accessible SVG: http://www.sitepoint.com/tips-accessible-svg/ Сегодняшняя музыка — Fatty - Depper Dub Mixtape. Все права принадлежат не нам. Мы на твиттере: • Александр Гончаров: http://twitter.com/websanya • Никита Тарасов: http://twitter.com/justelementar uWebDesign это: • Сайт: http://uwebdesign.ru • Подкаст в iTunes: https://itunes.apple.com/ru/podcast/uwebdesign-vse-o-veb-razrabotke/id923355344 • Паблик на ВК: http://vk.com/uwebdesign • Лента в Twitter: http://twitter.com/uwebdesgn • Канал на YouTube: https://youtube.com/user/uwebdesign • Страница на Facebook: https://www.facebook.com/uwebdesgn