refactor 3-more into separate books

5-animation/2-css-transitions/1-animate-logo-css/solution.md

@@ -0,0 +1,28 @@
+# Алгоритм
+
+Анимируйте одновременно свойства `left/top` и `width/height`.
+
+Чтобы в процессе анимации таблица сохраняла геометрию -- создайте на месте `IMG` временный `DIV` фиксированного размера и переместите `IMG` внутрь него. После анимации можно вернуть как было.
+
+Для начала анимации - добавьте класс изображению:
+
+```css
+.growing {
+  /* все свойства анимируются 3 секунды */
+  -webkit-transition: all 3s;
+  -moz-transition: all 3s;
+  -o-transition: all 3s;
+  -ms-transition: all 3s;
+}
+```
+
+При этом, чтобы анимация началась, может понадобиться отложить установку класса и новых свойств через `setTimeout(.., 0)`.
+
+Для отлова конца анимации используйте событие `on<browser>TransitionEnd`. Оно сработает несколько раз, для каждого свойства, поэтому чтобы обработчик не вывел "OK" много раз -- можно обрабатывать окончание только при одном `event.propertyName`.
+
+# Похожая задача
+Аналогичная задача, решённая средствами JS: [](/task/animate-logo).
+
+# Решение
+
+[edit src="solution" task/]