SVG анимации stroke-dasharray & stroke-dashoffset

Научимся делать цепочки из анимаций(animationend, transitionend) и анимировать простые фигуры. обзор задания из моей практики ps// по хорошему, для проверки на окончание анимации, или transition, нужно проверять на конкретное имя, свойство. И лучше не использовать анонимные функции, если мы хотим потом удалять обработчики ===== Timе-коды ===== 00:00​ превью из видео 00:16 обзор задания из моей практики 00:40​ *** 1 часть *** 01:04​ задаём базовую анимацию на CSS 01:53​ stroke-dasharray 02:30​ stroke-dashoffset 03:25​ принципы работы 03:40​ оптимизация через JS 06:37​ доработка кода 08:15​ *** 2 часть *** 08:40​ getTotalLength() - длина пути 09:45​ анимируем через CSS 10:37​ делаем цепочки анимаций 13:20 final ps// правильнее указывать в проверках типа transitionend и animationend, тип эвента. т.к например на элементе может быть несколько transition, или анимаций и тогда условие сработает несколько раз. Примерно так: if ( === ’blabla’) ===== codepen - группа элементов ===== ===== группа в контакте ===== ===== канал в telegram: =====